KendoUI日期字段不過濾。它使電網空白

我試着用下面的JS代碼示例數據：KendoUI日期字段不過濾。它使電網空白

$(document).ready(function() { 

    var PraksysDateFormats = ["dd-MM-yyyy", "dd/MM/yyyy", "dd-MM-yy", "dd/MM/yy", "dd.MM.yy", "ddMMyy", "ddMM", "dd.MM.yyyy", "ddMMyyyy"]; 

    relationDataSource = new kendo.data.DataSource({ 
     data: [ 
     { ProductName: "Computer", UnitPrice: 100, UnitsInStock: 5, Discontinued: false, FromDate: new Date(kendo.toString(kendo.parseDate("10-11-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')), ToDate: new Date(kendo.toString(kendo.parseDate("11-11-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')) }, 
     { ProductName: "TV", UnitPrice: 1000, UnitsInStock: 5, Discontinued: false, FromDate: new Date(kendo.toString(kendo.parseDate("20-10-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')), ToDate: new Date(kendo.toString(kendo.parseDate("22-10-2016", 'dd-MM-yyyy'), 'yyyy-MM-dd')) }, 
     ], 
     schema: { 
      model: { 
       fields: { 
        ProductName: { type: "string" }, 
        UnitPrice: { type: "number" }, 
        UnitsInStock: { type: "number" }, 
        Discontinued: { type: "boolean" }, 
        FromDate: { type: "date" }, 
        ToDate: { type: "date" } 
       } 
      } 
     }, 
    }); 


    var grid = $("#grid").kendoGrid({ 
     dataSource: relationDataSource, 
     scrollable: true, 
     sortable: true, 
     //editable: true, 
     filterable: true, 
     columns: [ 
      { field: "ProductName", title: "Product Name" }, 
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}" }, 
      { field: "UnitsInStock", title: "Units In Stock" }, 
      { field: "Discontinued", title: "Discontinued" }, 
      { 
       field: "FromDate", title: "From Date", editor: FromDatePicker, width: 200, format: "{0:dd-MM-yyyy}", filterable: { 
        ui: dateFilter 
       } 
      }, 
      { 
       field: "ToDate", title: "To Date", editor: ToDatePicker, width: 200, format: "{0:dd-MM-yyyy}", filterable: { 
        ui: dateFilter 
       } 
      } 
     ], 
     edit: function (e) { 
      var grid = this; 
      var fieldName = grid.columns[e.container.index()].field; 
      // alert(fieldName) 
     }, 
     save: function (e) { 
      var grid = this; 
      var fieldName = grid.columns[e.container.index()].field; 
      // alert(e.container.index()); 
      // alert(fieldName) 
      var productName = e.values.ProductName || e.model.ProductName; 
      var relation = e.values.Relation || e.model.Relation; 
      var dataItem = this.dataSource.getByUid(e.model.uid); 
      dataItem.set("ProductName", productName); 
      dataItem.set("UnitPrice", 9000); 
      dataItem.set("UnitsInStock", 99); 
      dataItem.set("Discontinued", true); 
     }, 
     update: function (e) { 
      alert("Update") 
     } 
    }).data("kendoGrid"); 


    function FromDatePicker(container, options) { 
     alert(options.field); 
     $('<input id="BrugergyldigFradato" name="FromDate" dynamicfield="71" data-bind="value:' + options.field + '"/>') 
      .appendTo(container) 
      .kendoDatePicker({ 
       format: "dd-MM-yyyy", 
       parseFormats: PraksysDateFormats, 
       culture: "da-DK" 
      }); 
     $('<span class="k-invalid-msg" data-for="FromDate"></span>').appendTo(container); 
    }; 
    function ToDatePicker(container, options) { 
     alert(options.field); 
     $('<input id="BrugergyldigTildato" name="ToDate" dynamicfield="71" data-bind="value:' + options.field + '"/>') 
      .appendTo(container) 
      .kendoDatePicker({ 
       format: "dd-MM-yyyy", 
       parseFormats: PraksysDateFormats, 
       culture: "da-DK" 
      }); 
     $('<span class="k-invalid-msg" data-for="ToDate"></span>').appendTo(container); 
    }; 


    function dateFilter(element) { 
     element.kendoDatePicker({ 
      format: "dd-MM-yyyy", 
      culture: "da-DK" 
     }); 
    }; 

});

我能夠過濾所有列，除了最後2個日期字段。輸入日期字段過濾器值時，它將使網格變爲空白。我的日期格式是「dd-MM-yyyy」。任何線索將不勝感激。

來源

2016-01-11 Jaish Mathews

不要在數據源中使用新日期。

在我的瀏覽器（Chrome）：

new Date("2016-11-11") 
Fri Nov 11 2016 02:00:00 GMT+0200

正如你看到的日期轉換爲本地時間在這裏。但是，當您使用11-11-2016過濾時，您的過濾器將不會被轉換。在這種情況下，您的過濾器值將爲

Fri Nov 11 2016 00:00:00 GMT+0200

因此平等檢查失敗。

相反，您可以只使用kendo.parseDate來分配您的日期值，它將起作用。

data: [ 
    { ProductName: "Computer", UnitPrice: 100, UnitsInStock: 5, Discontinued: false, FromDate: kendo.parseDate("10-11-2016", 'dd-MM-yyyy'), ToDate: kendo.parseDate("11-11-2016", 'dd-MM-yyyy') }, 
    { ProductName: "TV", UnitPrice: 1000, UnitsInStock: 5, Discontinued: false, FromDate: kendo.parseDate("20-10-2016", 'dd-MM-yyyy'), ToDate: kendo.parseDate("22-10-2016", 'dd-MM-yyyy') }, 
],

來源

2016-01-12 09:23:24

就是這樣。謝謝您的幫助 –

這道岔是一種格式問題，現在正按預期

來源

2016-01-12 10:16:38

KendoUI日期字段不過濾。它使電網空白

回答

相關問題