A tweak to the date range filter using moment.js

crush123

Based on the function provided by guillimon

https://www.datatables.net/plug-ins/filtering/row-based/range_dates

I have modified the function to use the moment.js library which means less string manipulation is needed

(date is in format YYYY-MM-DD)

I just need to add a datepicker to my form now !

    // Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup( function() {
    table.draw();
} );

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
    var filterstart = $('#min').val();
    var filterend = $('#max').val();
    var iStartDateCol = 5; //using column 5 in this instance
    var iEndDateCol = 5;

    var tabledatestart = aData[iStartDateCol];
    var tabledateend= aData[iEndDateCol];

    if ( filterstart === "" && filterend === "" )
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
    {
        return true;
    }
    return false;
}
);
});

(Don't forget to include the moment library)
if anyone can help me smarted it up to use a data object rather than a column number, even better.

HTML

<table border="0" cellspacing="5" cellpadding="5">
    <tbody><tr>
        <td>Minimum value:</td>
        <td><input type="text" id="min" name="min"></td>
    </tr>
    <tr>
        <td>Maximum value:</td>
        <td><input type="text" id="max" name="max"></td>
    </tr>
</tbody></table>

allan

Very nice - thanks for sharing with us!

Allan