Kendo UI Grid - 过滤器 - 日期范围 [英] Kendo UI Grid - Filter - Date Range

问题描述

按日期范围过滤列对我在 SO
中找到的解决方案很有效如何在两个日期之间定义 Kendo 网格列过滤器?- 由 MWinstead 提出

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

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

我们如何解决这个问题?

解决方案

解决方案是为 Begin Date 提供 null 值，即使用户没有选择了它.
但是，我们必须控制提交按钮...

function grid_filterMenuInit(e) {var currentFieldName = e.field;if(currentFieldName === "yourFieldDate") {console.info("忽略此字段:<" + currentFieldName + ">");返回;}console.info("执行此字段:<" + 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;//我们必须将 kendoDateTime 转换为 JavaScript DateTime 对象//在我的例子中，日期时间格式是:yyyy/MM/dd HH:mm:ssif (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();//存储之前的过滤器 ...if (typeof previousFilter === 'object' &&previousFilter.hasOwnProperty("filters")) {previousFilters = previousFilter.filters;for (var i=0 ; i

Filtering a column by date range works nice with solution that i've found in SO
How to define a Kendo grid Column filter between two dates? - proposed by MWinstead

But
"The only problem with this solution is that if you only select the End Date and apply the filter, the next time you open the filter menu, the Begin Date will get populated with the End Date you entered and the LTE operator will be selected, which will be changed by the jQuery code, resulting in a wrong filter"

Question asked by ataravati in the same thread

How we can resolve this issue ?

解决方案

The soltion is to provide the Begin Date with null value, even if the user hasn't selected it.
But, we must take control of submit button...

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;
}

这篇关于Kendo UI Grid - 过滤器 - 日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！