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