AngularJS / Bootstrap - Datepicker范围过滤器问题

时间:2015-02-12 21:20:49

标签: angularjs datepicker angular-ui-bootstrap

我正在使用DataTables(http://www.datatables.net/)和Bootstrap datepicker。这是我的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;
    }
});

我在使用datepicker范围过滤器时遇到了一些问题。如果我选择范围01/01/2015到2015年1月28日,则行过滤得很好(过滤第2列&#34;创建日期&#34;)。一旦我改变&#34;结束日期&#34;到2015年1月29日,出现带有2月日期的第一行。为什么它包括2月份的日期,我的范围仍然是1月份?

2 个答案:

答案 0 :(得分:0)

错误是Date javascript对象中的month参数被0编入索引,因此1月为0,2月为1,依此类推。你假设是1基础,所以实际上你的限制在2月29日。

我完全建议你使用像moment.js这样的库来满足你所有的javascript日期/时间需求。

在阅读完javascript之后,我觉得你来自PHP righ? 高五。这不是主题,但这里有一些关于你的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;
});

答案 1 :(得分:0)

我弄清楚出了什么问题。以下是更新的代码段:

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)