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

Kendo UI Grid - Filter - Date Range

本文关键字:日期 范围 过滤器 Kendo 网格 UI      更新时间:2023-09-26

按日期范围筛选列与我在SO
中找到的解决方案配合得很好如何在两个日期之间定义剑道网格列过滤器?-由MW-delect 提出

但是
"此解决方案的唯一问题是,如果您只选择结束日期并应用筛选器,下次打开筛选器菜单时,开始日期将填充您输入的结束日期,并选择LTE运营商,jQuery代码将更改该运营商,从而导致错误的筛选器"

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

我们如何解决这个问题?

解决方案是为开始日期提供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;
}