带有数据表的jQuery datepicker(日期范围包含问题)

时间:2018-02-27 10:34:47

标签: javascript jquery datepicker datatables jquery-ui-datepicker

我的网站上有一个jQuery日期选择器,用于范围值,除了最小日期不包含的小问题外,它可以正常工作。

注意:我正在使用带有jQuery数据表的datepicker。数据表日期列以yyyy-mm-dd hh:ss:mm格式返回日期。

如果我选择开始日期为2018-02-25且结束日期为2018-02-27,则数据表仅返回2018-02-252018-02-26的记录,而我想返回2018-02-27的记录。

HTML

<div class="input-group">
    <span class="input-group-addon"></span>
    <input type="text" class="form-control dateStart" placeholder="YYYY-MM-DD (Start Date)">
</div>

<div class="input-group">
    <span class="input-group-addon"></span>
    <input type="text" class="form-control dateEnd" placeholder="YYYY-MM-DD (End Date)">
</div>

JS

$(document).ready(function() {
    $.fn.dataTable.moment('YYYY-MM-DD');

    var oTable = $('#data-table').DataTable();

    $('.dateStart').click(function() {
        $(".dateStart").datepicker("show");
    });

    $('.dateEnd').click(function() {
        $(".dateEnd").datepicker("show");
    });

    $(".dateStart").datepicker({
        autoclose: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        gotoCurrent: true,
        dateFormat: 'yy-mm-dd',
        "onSelect": function(date) {
            minDateFilter = new Date(date).getTime();
            oTable.draw();
        }
    }).keyup(function() {
        minDateFilter = new Date(this.value).getTime();
        oTable.draw();
    });

    $(".dateEnd").datepicker({
        autoclose: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        gotoCurrent: true,
        dateFormat: 'yy-mm-dd',
        "onSelect": function(date) {
            maxDateFilter = new Date(date).getTime();
            oTable.draw();
        }
    }).keyup(function() {
        maxDateFilter = new Date(this.value).getTime();
        oTable.draw();
    });

    // Date range filter
    minDateFilter = "";
    maxDateFilter = "";

    $.fn.dataTableExt.afnFiltering.push(
        function(oSettings, aData, iDataIndex) {
            if (typeof aData._date == 'undefined') {
                aData._date = new Date(aData[0]).getTime();
            }

            if (minDateFilter && !isNaN(minDateFilter)) {
                if (aData._date < minDateFilter) {
                    return false;
                }
            }

            if (maxDateFilter && !isNaN(maxDateFilter)) {
                if (aData._date > maxDateFilter) {
                    return false;
                }
            }

            return true;
        }
    );
});

1 个答案:

答案 0 :(得分:0)

脚本将2018-02-27读取为2018-02-27 00:00:00。

如果你想参加2018-02-27,你必须设置 2018-02-28 而不是2018-02-27。 (或2018-02-27 23:59:59)

您可以添加以下行来添加一天。

maxDateFilter.setDate(maxDateFilter.getDate()+1);