Following on from my last post about implementing Jump to Page functionality in a Datatable I've recently been asked to implement a Date Range Filter within another table and I used something quite similar:
,"fnInitComplete": function(){
var date_range = $("#date-range").addClass("row");
var from_fate = $("<div></div>",{
"class": "form-group col-xs-4"
}).appendTo(date_range);
var to_fate = $("<div></div>",{
"class": "form-group col-xs-4"
}).appendTo(date_range);
var null_box = $("<div></div>",{
"class": "checkbox col-xs-2"
}).appendTo(date_range);
null_box.append($("<label></label>",{
"text": "Empty?"
}).prepend($("<input/>",{
"type": "checkbox",
"id": "null_box"
})));
date_range.append($("<button></button>",{
"id": "filter_date",
"class": "btn btn-primary col-xs-2",
"text": "Filter Dates"
}));
from_fate.append($("<label></label>",{
"class": "sr-only",
"for": "from_date",
"text": "From Date"
})).append($("<input>",{
"type": "date",
"class": "form-control",
"id": "from_date",
"name": "from_date",
"value": moment(earliest, "X").format("YYYY-MM-DD")
}));
to_fate.append($("<label></label>",{
"class": "sr-only",
"for": "to_date",
"text": "To Date"
})).append($("<input>",{
"type": "date",
"class": "form-control",
"id": "to_date",
"name": "to_date",
"value": moment(latest, "X").format("YYYY-MM-DD")
}));
}
Within the Twig template I set the earliest and latest variables after doing a couple of simple Medoo queries:
$latest = $db->get(
"contact_donation",
"accepted",
array(
"ORDER" => "accepted DESC",
"LIMIT" => 1
)
);
$earliest = $db->get(
"contact_donation",
"accepted",
array(
"accepted[!]" => null,
"ORDER" => "accepted ASC",
"LIMIT" => 1
)
);
I also needed to listen to changes to the from_date and to_date inputs and alter those variables as a result:
$(document).on("change", "#from_date", function(){
if(moment($("#from_date").val()).isValid()){
earliest = parseInt(moment($("#from_date").val()).format("X"), 10);
}
});
$(document).on("change", "#to_date", function(){
if(moment($("#to_date").val()).isValid()){
latest = parseInt(moment($("#from_date").val()).format("X"), 10);
}
});
And listen for the filter_date click event:
$(document).on("click", "#filter_date", function(){
table.draw();
});
I clocked that not all the records would have a Date and wanted those to be available so I added the checkbox to include those dates despite the Dates searched for and so this is the search code I added:
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex){
var show_null = $("#null_box").prop("checked");
var min = earliest;
var max = latest;
var donation_date = (moment(data[2], "DD/MM/YYYY").isValid())
? parseInt(moment(data[2], "DD/MM/YYYY").format("X"), 10)
: "null";
return (show_null && donation_date === "null") ||
(min <= donation_date && donation_date <= max);
}
);
As you can probably tell I've taken all of the pain out of JavaScript dates by using momentjs. I was getting all sorts of result issues until I clocked that when I rendered the table I was rendering dates using the DD/MM/YYYY format rather than the default YYYY-MM-DD.
