DataTables date range filter
** Only Change ID Name = "carrier_table"
user in Script Tag
$(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[7]);
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();
$('#max').datepicker();
var table = $('#carrier_table').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').change(function () {
table.draw();
});
});
For = HTML
<div class="row date-filter">
<div class="col-md-2">
<h4 class="text text-primary">Search By Date:</h4>
</div>
<div class="col-md-3">
<label>From Date:</label>
<input type="text" id="min" name="min" class="form-control">
</div>
<div class="col-md-3">
<label>To Date:</label>
<input type="text" id="max" name="max" class="form-control">
</div>
</div>
0 comments:
Post a Comment
Thanks