【问题标题】:Date range also filters the same day from another month?日期范围也从另一个月过滤同一天?
【发布时间】:2016-01-08 13:38:25
【问题描述】:

我使用的是dt-date_range_filter,我的日期格式是yyyy-mm-dd

将最小日期设置为 2015-09-11 并将最大日期设置为 2015-09-24 还会返回日期为 2015-10-15 的结果,如下所示:

这是我的待命代码:

<script type="text/javascript" language="javascript" class="init">

$(document).ready(function() {

    $(function() {
        $( "#min" ).datepicker();
    });

    $(function() {
        $( "#max" ).datepicker();
    });

    var table = $('#example').DataTable( {

    lengthChange: true,
         buttons: [
            'print'
        ],
        "oSelectorOpts": {
            page: 'current'
        },

        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
            };

            // Total over all pages
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                } );

            // Total over this page
            pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 5 ).footer() ).html(
                '<center>Total Sales <br>'+'P '+ pageTotal+'.00'
            );
        }
    } );
    $('#min').change( function() { table.fnDraw(); } );
    $('#max').change( function() { table.fnDraw(); } );
    table.buttons().container()
        .appendTo( '#example_wrapper .col-sm-6:eq(0)' );
} );

</script>

就好像它根本没有过滤,因为另一个月的同一天也被过滤了?

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
        var yyyy = today.getFullYear();

        if (dd<10)
        dd = '0'+dd;

        if (mm<10)
        mm = '0'+mm;

        today = yyyy+'-'+mm+'-'+dd;

        if ($('#min').val() != '' || $('#max').val() != '') {
        var iMin_temp = $('#min').val();
        if (iMin_temp == '') {
            iMin_temp = '1980-01-01';
        }

        var iMax_temp = $('#max').val();
        if (iMax_temp == '') {
            iMax_temp = today;
        }

        var arr_min = iMin_temp.split("-");
        var arr_max = iMax_temp.split("-");
        var arr_date = aData[7].split("-");

        var iMin = new Date(arr_min[2], arr_min[0], arr_min[1], 0, 0, 0, 0)
        var iMax = new Date(arr_max[2], arr_max[0], arr_max[1], 0, 0, 0, 0)
        var iDate = new Date(arr_date[2], arr_date[0], arr_date[1], 0, 0, 0, 0)

        if ( iMin == "" && iMax == "" )
        {
            return true;
        }
        else if ( iMin == "" && iDate < iMax )
        {
            return true;
        }
        else if ( iMin <= iDate && "" == iMax )
        {
            return true;
        }
        else if ( iMin <= iDate && iDate <= iMax )
        {
            return true;
        }
            return false;
        }
    }
);

【问题讨论】:

    标签: javascript jquery date filter date-range


    【解决方案1】:

    你在Javascript中使用Date构造函数的方式有错误。

    创建一个表示单个时刻的 JavaScript Date 实例。 Date 对象基于时间值,即自 1970 年 1 月 1 日 UTC 以来的毫秒数。

    构造函数

    new Date();
    new Date(value);
    new Date(dateString);
    new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
    

    您使用的最后一个构造函数的顺序是year, month, day

    但是,您的代码执行此操作,意译:

    '2015-10-15'.split("-");
    

    返回这个数组:

    [0]: "2015"
    [1]: "10"
    [2]: "15"
    

    然后你写这个:

    new Date(arr_date[2], arr_date[0], arr_date[1], 0, 0, 0, 0)
    

    这意味着:

    new Date("15", "2015", "10", 0, 0, 0, 0)
    

    您正在输入订单day, year, month,导致日期错误。

    您当前的输入结果如下:

    min:  Array [ "2015", "09", "11" ]
    max:  Array [ "2015", "09", "24" ]
    date: Array [ "2015", "10", "15" ]
    
    min:  Date 2078-12-08T23:00:00.000Z
    max:  Date 2091-12-08T23:00:00.000Z
    date: Date 2082-12-09T23:00:00.000Z
    

    您生成了错误的日期,导致过滤器失败,因为2082-12-09T23:00:00.000Z 确实在2078-12-08T23:00:00.000Z2091-12-08T23:00:00.000Z 之间。

    因此正确的代码如下:

    var iMin  = new Date( arr_min[0],  arr_min[1],  arr_min[2], 0, 0, 0, 0);
    var iMax  = new Date( arr_max[0],  arr_max[1],  arr_max[2], 0, 0, 0, 0);
    var iDate = new Date(arr_date[0], arr_date[1], arr_date[2], 0, 0, 0, 0);
    

    【讨论】:

    • 您能指出要更改的代码吗?我不知道为什么这不起作用。
    • @glendonphilippbaculio 更新了答案。
    • @glendonphilippbaculio addconsole.log(iMin, iMax, iDate); 修改后的代码并从控制台复制输出(ctrl + shift + J),以便我可以看到值。
    • 这是 在 min
    • @glendonphilippbaculio 这不可能,它应该输出 3 个 Date 对象,而不是元素。
    猜你喜欢
    • 2012-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-08
    • 1970-01-01
    • 1970-01-01
    • 2021-04-16
    相关资源
    最近更新 更多