Jquery Data Table search Date Range

Hi,

I m using JQuery DataTable along with search functionality.

https://datatables.net/

I would like to search column based on Date Range.

DateRange

27/04/2021 - 30/04/2011

Now when i search & pass the value of 27/04/2021 it's giving the record. But when i search if it falls between this range then it should show the record. Currently it's not returning for 28/04/2021.

Thanks

create two textbox to take min and max date and then filter accordingly.

"0" cellspacing="5" cellpadding="5">
Minimum date:
"text" id="min" name="min">
Maximum date:
"text" id="max" name="max">
"myDataTable" class="display nowrap" style="width:100%">
var minDate, maxDate;
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = minDate.val();
var max = maxDate.val();
var date = new Date( data[4] ); // means 4th column is datetime //column
if (
( min === null && max === null ) ||
( min === null && date <= max ) ||
( min <= date && max === null ) ||
( min <= date && date <= max )
) {
return true;
}
return false;
}
);
$(document).ready(function() {
// Create date inputs
minDate = new DateTime($('#min'), {
format: 'MMMM Do YYYY'
});
maxDate = new DateTime($('#max'), {
format: 'MMMM Do YYYY'
});
// DataTables initialisation
var table = $('#example').DataTable();
// Refilter the table
$('#min, #max').on('change', function () {
table.draw();
});
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
create two textbox to take min and max date and then filter accordingly.
"0" cellspacing="5" cellpadding="5">

            Minimum date:
            "text" id="min" name="min">


            Maximum date:
            "text" id="max" name="max">


    "myDataTable" class="display nowrap" style="width:100%">


var minDate, maxDate;

// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[4] ); // means 4th column is datetime //column

        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);

$(document).ready(function() {
    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });

    // DataTables initialisation
    var table = $('#example').DataTable();

    // Refilter the table
    $('#min, #max').on('change', function () {
        table.draw();
    });
});