AngularJS/Bootstrap - 日期选择器范围过滤器问题

Question

我正在使用数据表（http://www.datatables.net/) and Bootstrap datepicker. Here is my JSFiddle: http://jsfiddle.net/wg3b6y7m/ 和日期范围过滤器的代码：

function (oSettings, aData, iDataIndex) {
    if ($('#min').val() == '' && $('#max').val() == '') {
        return true;
    }

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

        if (iMin_temp == '') {
            iMin_temp = '01/01/2000';
        }

        var iMax_temp = $('#max').val();

        if (iMax_temp == '') {
            iMax_temp = '31/12/2999'
        }

        var arr_min = iMin_temp.split("/");
        var arr_max = iMax_temp.split("/");

        // aData[column with dates]
        var arr_date = aData[1].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;
    }
});

我在使用日期选择器范围过滤器时遇到一些问题。如果我 select 的范围是 01/01/2015 到 01/28/2015，行过滤就很好（过滤第二列 "Date Created"）。一旦我将 "End Date" 更改为 01/29/2015，就会出现带有二月日期的第一行。为什么我的范围还在 1 月，而它包括 2 月的日期？

Answer 1

错误是 Date javascript 对象中的月份参数是 0 索引的，所以一月是 0，二月是 1 等等。你假设是基于 1 的，所以实际上你的限制是在 2 月 29 日。

我完全建议您使用像 moment.js 这样的库来满足您的所有 javascript date/time 需求。

看了你的javascript，我觉得你来自PHP对吧？高五。这是题外话，但这里有一些关于您的 javascript 代码的想法。

function (oSettings, aData, iDataIndex) {
    // Save variables instead of calling the method multiple times
    var min = $('#min').val();
    var max = $('#max').val();

    // Prefer exact comparison over "lax" comparison,
    // so === instead of ==, this is because javascript has a very
    // weird comparison table where 0 == false, sometimes you 
    // don't want to compare a number to boolean, sometimes you might
    // but that's error prone, so it's safer to use ===
    if (min === '' && max === '') {
        return true;
    }

    // Instead of nesting, do a reverse check and exit, makes it easier to follow
    // Hey... you already done it above, no need to repeat the check.
    // if (min === '' && max === '') { 
    //   return false;
    // }

    // No need to redeclare
    // var iMin_temp = min;
    // var iMax_temp = max;

    if (min === '') {
        min = '01/01/2000';
    }

    if (max === '') {
        max = '31/12/2999';
    }

    var arr_min = iMin_temp.split("/");
    var arr_max = iMax_temp.split("/");

    // aData[column with dates]
    var arr_date = aData[1].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 you are parsing the dates above, they can't be empty strings, 
    // so just feel free to compare them directly as dates.
    // 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;
    return iMin <= iDate && iDate <= iMax;
});

Answer 2

我知道出了什么问题。这是更新后的代码片段：

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

AngularJS/Bootstrap - 日期选择器范围过滤器问题

AngularJS/Bootstrap - Datepicker range filter issues

datepicker

angularjs

angular-ui-bootstrap