The datefilter is working but the issue is it is giving events incorrectly. For example there is an entry on 1st Nov, but it will not filter it on 1st Nov rather on 2nd Nov.
<div class="input-daterange">
<h4 style="margin-left:15px;">Date Filter</h4>
<div class="col-md-4">
<input type="text" name="start_date" id="min" class="form-control" />
</div>
<div class="col-md-4">
<input type="text" name="end_date" id="max" class="form-control" />
</div>
</div>
<table id="event_table" class="display">>
$(document).ready(function() {
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var min = $('#min').datepicker("getDate");
var max = $('#max').datepicker("getDate");
var startDate = new Date(data[3]);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
return false;
});
$("#min").datepicker({
onSelect: function() {
table.draw();
},
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
$("#max").datepicker({
onSelect: function() {
table.draw();
},
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
var table = $('#event_table').DataTable({
dom: 'Bfrtip',
buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
});
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').change(function() {
table.draw();
});
});