I have two inputs (minimum date and maximum date) with which I want to filter the results of my tables, the problem is that DataTables has a serious problem with date ordering. I have read on the internet that for those who want to have the dd/mm/YYYY format there is a bit of a problem and they recommend doing a "trick" that is faster than another option but only works in the search field that DataTables has by default, but with two inputs it doesn't work.
This "trick" consists of inserting a with display none with the date in YYYYMMDD format in this way the user does not see the content of the DataTables but if he can carry out the sorting.
<td><span style='display: none;'>20150221</span>21/02/2015</td>
So far so good with the filtering of the default DataTables browser, the thing is that I would like two entries and put a date range. And with the following code it does not work for me, it starts filtering well but when I finish writing the maximum date it no longer filters correctly.
The thing is that I don't know if the first "trick" affects the second case or vice versa, could someone who has had the same or similar problem enlighten me a little? Here I leave my code.
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iFini = document.getElementById('min').value;
var iFfin = document.getElementById('max').value;
var iStartDateCol = 4;
var iEndDateCol = 4;
iFini = iFini.substring(6,10) + iFini.substring(3,5) + iFini.substring(0,2);
iFfin = iFfin.substring(6,10) + iFfin.substring(3,5) + iFfin.substring(0,2);
var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);
if (iFini === "" && iFfin === "") {
return true;
} else if (iFini <= datofini && iFfin === "") {
return true;
} else if (iFfin >= datoffin && iFini === "") {
return true;
} else if (iFini <= datofini && iFfin >= datoffin) {
return true;
}
return false;
}
);
var table_filter = $('#DataTables_Table_4').dataTable();
$('#min').keyup( function() { table_filter.fnDraw(); } );
$('#max').keyup( function() { table_filter.fnDraw(); } );
In the end after trying everything, I have tried the moment.js library and modified the filter function to support the dd-mm-YYYY format
http://momentjs.com/
I leave the code here:
It is not necessary to remove the "trick" for it to work.