DataTables 日期范围过滤器,没有得到第一个日期

DataTables date range filter, not getting the first date

您好,我正在使用 DataTables 日期范围过滤器。这是 link -> https://datatables.net/extensions/datetime/examples/integration/datatables.html

下面是我的代码

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[9] );
 
        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: 'MM-DD-YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MM-DD-YYYY'
    });

    $('#sales').DataTable({
        aLengthMenu: [
            [25, 50, 100, 200, -1],
            [25, 50, 100, 200, "All"]
        ],
        iDisplayLength: -1,
        scrollX: true
    });
 
    // DataTables initialisation
    var table = $('#sales').DataTable();
 

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

当我从 04-01-2022 搜索到 04-03-2022 时。它没有显示 04-01-2022 的记录

但是当我输入 03-31-202204-02-2022 它显示了 [=22= 的记录]04-01-2022

您似乎在 document.ready 上设置了一次 MinDateMaxDate,但在用户输入日期后没有设置。

我已将设置 MinDateMaxDate 的代码移动到您的搜索过滤器中。

另一个潜在的问题是,您正在比较 MM-DD-YYYY 格式的日期,就好像它们是字符串一样,这在比较 03-12-2022 和 05-12-2020 时不起作用.从日期的角度来看,第一次约会较晚,但从 string-comparison 的角度来看较早(第一次)。因此,您可能应该将日期转换为 YYYY-MM-DD 格式,这适用于字符串比较。

我不确定这最后一部分,因为你有 new Date(...)(这是标准的 JS)以及 new DateTime(...)(我认为这不是标准的 JS)所以它不是非常清楚您是在比较字符串(例如 minDate.val())还是对象(例如 new Date( data[9] ))。

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 ) {
        // Create date inputs
        minDate = new DateTime($('#min'), {
            format: 'MM-DD-YYYY'
        });
        maxDate = new DateTime($('#max'), {
            format: 'MM-DD-YYYY'
        });

        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[9] );
 
        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    $('#sales').DataTable({
        aLengthMenu: [
            [25, 50, 100, 200, -1],
            [25, 50, 100, 200, "All"]
        ],
        iDisplayLength: -1,
        scrollX: true
    });
 
    // DataTables initialisation
    var table = $('#sales').DataTable();
 

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