I thought your question was about using the filterFormatter
which modifies the inputs within the table, but since your date inputs are outside of the table, you'll need to use code that looks something like this (demo):
var $table = $('#alerts'),
validDate = function (d) {
return d instanceof Date && isFinite(d);
},
updateFilters = function () {
var range = [],
from = $('#from').datepicker('getDate'),
to = $('#to').datepicker('getDate');
from = validDate(from) ? from.getTime() : '';
to = validDate(to) ? to.getTime() : '';
range[4] = from ? (to ? from + ' - ' + to : '>=' + from) :
(to ? '<=' + to : '');
$.tablesorter.setFilters($table, range, true);
};
$table.tablesorter({
sortList: [[4, 0]],
theme: "bootstrap",
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ["uitheme", "filter", "zebra"],
widgetOptions: {
filter_reset: 'button.reset',
// hide column filters
filter_columnFilters: false
}
})
.tablesorterPager({
container: $("#pager")
});
$("#from").datepicker({
defaultDate: "+1w",
dateFormat: 'd MM yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
setTimeout(function(){ updateFilters(); }, 1);
}
});
$("#to").datepicker({
defaultDate: "+1w",
dateFormat: 'dd MM yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
setTimeout(function(){ updateFilters(); }, 1);
}
});