DataTables 1.10 - date range filter.

webezine

Hi All,

I know quite a few people have had issues with date range filters and it appears I'm no different.

I've got a table with multiple filters and trying to create one which returns table rows which ahve a date between this range.
This is what I've got so far:

the start date and end date are passed into the function as yyyymmdd without any seperator and the row date is formated the same.

$('#sMonth').change( function(e) {
// Date SEARCH functionality
var startD = $('#sDay').val();
var startM = $('#sMonth').val();
var startY = $('#sYear').val();

        var endD = $('#eDay').val();
         var endM = $('#eMonth').val();
         var endY = $('#eYear').val();

        e.preventDefault();
        var startDate =  startY + "-" + startM + "-" + startD;
            var endDate =  endY + "-" + endM + "-" + endD ;

            filterByDate(6, startDate, endDate);
            $('#csvOutput').DataTable().draw();

    });

This watches the input fields for change and then calls the below function (for now i have it only watching one input field)

function filterByDate(column, startDate, endDate) {
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var rowDate2 = aData[column].split("-");
rowDate2 = rowDate2[0].split("/");
rowDate2 = "20"+rowDate2[2] + "-" + rowDate2[1] + "-" + rowDate2[0];
var rowDate = normalizeDate(rowDate2),
start = normalizeDate(startDate),
end = normalizeDate(endDate);

      // If our date from the row is between the start and end
          if (start <= rowDate && rowDate <= end) {
            return true;
              } else if (rowDate >= start && end === '' && start !== ''){
                return true;
              } else if (rowDate <= end && start === '' && end !== ''){
                return true;
              } else {
                return false;
              }
            }

    );

}

It doesn't return any rows despite them being in the range and now no other filters work.
I've stepped into the function and can see that criteria are being met and return true is being triggered.

What am I doing wrong? PLEASE HELP! I'm pulling my hair out here and I've already got a receeding hairline! NOT GOOD!

daniel_r

tl;dr you can try out my yadcf plugin for datatables, among its 9 different filters types you can find the range dates filteres, see in action: http://yadcf-showcase.appspot.com/DOM_source.html (third column) in that page I placed it outside just to show that its possible...

webezine

Hi daniel_r - Thanks for your comment - I did see your solution and I downloaded it however - your rectn deownload didn't include the date range so I couldn't work out how to do it.

daniel_r

of course its not included, you should download jquery datepicker http://jqueryui.com/datepicker/ and include the js/css in your html page and it will work...

Look under the "Various filter options - 9 different types !!! :" in the
http://yadcf-showcase.appspot.com/ you will find out what third party plugin I did the integration with jQuery UI slider / jQuery UI datepicker / jQuery UI autocomplete

webezine

Sorry think we got our wires crossed- I downloaded your latest version (example) and it doesn't include te date range one which is on the website. Thats all I meant.

daniel_r

did you d/l the jQuery UI datepicker js/css and included them in your page? did you set your filter to be filter_type: "range_date" ? if not then do all of the above :)