DataTables 日期范围过滤器，未获取第一个日期

Question

您好，我正在使用 DataTables 日期范围过滤器。这是链接 -> 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-2022到04-02-2022时，它向我显示了04-01-2022的记录

Answer 1

看起来您在

MinDate

上设置了

MaxDate

和

document.ready

一次，但不是在用户输入日期之后设置。

我已将设置

MinDate

和

MaxDate

的代码移至您的搜索过滤器中。

另一个潜在的问题是，您正在比较 MM-DD-YYYY 格式的日期，就好像它们是字符串一样，这在比较 03-12-2022 和 05-12-2020 时不起作用。从日期角度来看，第一个日期较晚，但从字符串比较的角度来看，第一个日期较早（第一个）。因此，您可能应该将日期转换为 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();
    });
});

Answer 2

<td><span class="d-none">YYYY-MM-DD</span>DD.MM.YYYY</td>

您可以轻松地使用这种方式确定日期范围

d-none：BOOTSTRAP 的 CSS 类，但你可以使用 也是这样

   <td><span style="display:none;">YYYY-MM-DD</span>DD.MM.YYYY</td>