javascript - 日時ピッカー付きのKendoGridフィルターが正しく機能していませんか？

Question

ここでの問題は、日時ピッカーに基づいてグリッドデータ（サービスデータ）をフィルタリングすることです。サービスを提供できないため、ここではハードコードデータを使用していますが、要件は日付と時刻に基づいてサービスデータをフィルタリングすることです。これがjsbinです http://jsbin.com/exakic/41/edit

Answer 1

parse関数を ではgridなく定義に配置しましたdatasource。また、受信した形式と一致する形式を指定する必要があります (「yyyy-MM-dd HH:mm:ss」)。これを試して：

dataSource: {
    data  : [
        { FirstName: "Joe", LastName: "Smith", dob: "2013-02-18 19:54:13"},
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-18 20:55:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-18 21:56:15" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-18 22:57:16" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-19 20:55:20" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-24 20:56:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-26 20:57:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-02-28 20:42:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-03-22 11:55:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-03-27 20:55:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-04-18 20:55:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-04-23 20:55:14" },
        { FirstName: "Jane", LastName: "Smith", dob: "2013-04-24 20:55:14" }
    ],
    schema: {
        data: function (data) {
            $.each(data, function (i, val) {
                val.dob = kendo.parseDate(val.dob, "yyyy-MM-dd HH:mm:ss");
            });
            return data;
        }
    }

また、追加の変更をいくつか行います。

• の形式と一致するようにformat定義を に含めます。DateTimePickersGrid

コード：

$("#datetimepicker").kendoDateTimePicker({
    showSecond: true,
    dateFormat: "dd-MM-yy",
    timeFormat: "HH:mm:ss",
    format    : "dd-MM-yy HH:mm:ss"
});

$("#datetimepicker1").kendoDateTimePicker({
    showSecond: true,
    dateFormat: "dd-MM-yy",
    timeFormat: "HH:mm:ss",
    format    : "dd-MM-yy HH:mm:ss"
});

• blurイベントごとに変更changeして、入力フィールドの値が実際に変更された場合にのみ発生するようにします。

コード：

$("#datetimepicker, #datetimepicker1").on("change", function () {
    var mindate = $('#datetimepicker').data("kendoDateTimePicker").value();
    var maxdate = $('#datetimepicker1').data("kendoDateTimePicker").value();
    var condition = {
        logic  : "and",
        filters: [
        ]
    };
    if (mindate !== null) {
        condition.filters.push({ field: "dob", operator: "ge", value: mindate });
    }
    if (maxdate !== null) {
        condition.filters.push({ field: "dob", operator: "le", value: maxdate });
    }
    result.dataSource.filter(condition);
});