javascript - Kendo UI 网格 - 过滤器 - 日期范围

Question

按日期范围过滤列与我在SO
中找到的解决方案配合得很好 How to define a Kendo grid Column filter between two dates? - proposed by MWinstead

但是
“此解决方案的唯一问题是，如果您仅选择结束日期并应用过滤器，则下次打开过滤器菜单时，开始日期将填充您输入的结束日期，并且 LTE 运营商将被选中，这将被 jQuery 代码更改，导致错误的过滤器"

ataravati 提出的问题在同一个线程中

我们如何解决这个问题？

Answer 1

解决方案是为开始日期提供null值，即使用户尚未选择它。
但是，我们必须控制提交按钮...

function grid_filterMenuInit(e) {
    var currentFieldName = e.field;
    if(currentFieldName === "yourFieldDate") {
        console.info("ignoring this field: <"   + currentFieldName + ">");
        return;
    }
    console.info("performing this field: <"     + currentFieldName + ">");

    var filterSubmit = e.container.find("[type=submit]:eq(0)");
    $(filterSubmit).click(function() {
        var searchDateAfter     = e.container.find("input:eq(0)");
        var searchDateAfter1    = $(searchDateAfter).val();
        var searchDateBefore    = e.container.find("input:eq(1)");
        var searchDateBefore1   = $(searchDateBefore).val();
        var gridDatasource      = $("#yourGridId").data("kendoGrid").dataSource;

        var jsDateBefore   = null;
        var jsDateAfter    = null;

        // we must convert kendoDateTime to JavaScript DateTime object
        // in my case the date time format is : yyyy/MM/dd HH:mm:ss
        if (typeof searchDateBefore1 !== 'undefined') {
            jsDateBefore  = newJsDate(searchDateBefore1);
        }
        if (typeof searchDateAfter1  !== 'undefined') {
            jsDateAfter = newJsDate(searchDateAfter1);
        }

        var previousFilter      = gridDatasource.filter();
        var previousFilters     = new Array();
        var newFilters          = new Array();

        // storing the previous filters ...
        if (typeof previousFilter === 'object' && previousFilter.hasOwnProperty("filters")) {
            previousFilters = previousFilter.filters;
            for (var i=0 ; i<previousFilters.length ; i++) {
                if (previousFilters[i].field !== currentFieldName) {
                    if (newFilters.length == 0) {
                        newFilters = [previousFilters[i]];
                    }
                    else {
                        newFilters.push(previousFilters[i]);
                    }
                }
            }
        }

        // this is the soltion : we must provide the first filter, even if the user has not provide the begin date
        // and the value will be : null
        if (newFilters.length == 0) {
            newFilters =    [{field: currentFieldName, operator: "gte", value: jsDateAfter   }];
        }
        else {
            newFilters.push ({field: currentFieldName, operator: "gte", value: jsDateAfter   });
        }

        if (jsDateBefore !== null) {
            newFilters.push ({field: currentFieldName, operator: "lte", value: jsDateBefore  });  
        }
        gridDatasource.filter (newFilters);
        $(".k-animation-container").hide();
        // to stop the propagation of filter submit button 
        return false;
    });
}


function newJsDate(dateTime) {
    if (dateTime        === null        || 
        typeof dateTime === 'undefined' ||
        dateTime        === "") {
        return null;
    }
    var dateTime1        = dateTime.split(" ");
    var date             = dateTime1[0];
    var time             = dateTime1[1];

    var date1     = date.split("/");
    var time1     = time.split(":");

    var year      = parseInt(date1[0], 10);
    var month     = parseInt(date1[1], 10);
        month     = month - 1;
    var day       = parseInt(date1[2], 10);

    var hour      = parseInt(time1[0], 10);
    var minute    = parseInt(time1[1], 10);
    var second    = parseInt(time1[2], 10);

    var jsDate    = new Date(year, month,  day,
                    hour, minute, second);

    return jsDate;
}