Kendo UI 日期字段未过滤。它使网格空白

Question

我尝试使用以下 JS 代码处理示例数据：

$(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"。如有任何线索，我们将不胜感激。

Answer 1

不要在数据源中使用新日期。

在我的浏览器上(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') },
 ],

Answer 2

这次投票是格式问题，现在按预期工作

Kendo UI 日期字段未过滤。它使网格空白

KendoUI Date field is not filtering. It's Making grid blank

kendo-ui

kendo-ui-grid