2

日付をグリッドで一致させて結果を表示するために、日付から日付までを選択する必要があるという要件があります。 to および from の日付ピッカーで、グリッドの値と一致させます。

$("#datepicker").kendoDatePicker({
      dateFormat: "dd-mm-yy", 
format    : "dd-MM-yy "});


$("#datepicker1").kendoDatePicker({
  dateFormat: "dd-mm-yy", 
format    : "dd-MM-yy "});


 var result=$("#grid").kendoGrid({
    filterable: true,


  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" },
       { field: "dob", title: "DOB" ,  format: "{0:dd-MM-yy 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-05-30 21:56:15" },
        { FirstName: "Jane", LastName: "Smith" ,dob:"2013-05-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-03-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;
        }
        }   

  }
}).data("kendoGrid");


$("#datepicker, #datepicker1").on("change", function (){
    var mindate = $('#datepicker').data("kendoDatePicker").value();
    var maxdate = $('#datepicker1').data("kendoDatePicker").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);
});

これは、 to および from の日付で Kendo グリッド フィルターを更新したフィドル です。

4

1 に答える 1

3

時刻のない日付を含む追加の列を定義し、この列をフィルター処理に使用します。

これはあなたのdata関数で行うことができます：

data: function (data) {
    $.each(data, function (i, val) {
        val.dob2 = kendo.parseDate(val.dob, "yyyy-MM-dd");
        val.dob = kendo.parseDate(val.dob, "yyyy-MM-dd HH:mm:ss");
    });
    return data;
}

そしてフィルタリング部分：

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

2 番目のオプションは、フィルタリング条件を次のように定義することです。

if (mindate !== null) {
    condition.filters.push({ field: "dob", operator: "ge", value: new Date(mindate) });
}
if (maxdate !== null) {
    condition.filters.push({ field: "dob", operator: "le", value: new Date(maxdate) });
}

日付に時間を追加するnew Date(...)ための を追加します。

注:これは、クライアント側のフィルタリングを行っている限り有効です。サーバー側のフィルタリングを行っている場合、サーバー内のクエリを簡単に変更してこれに対処する必要があります。

于 2013-04-03T12:15:39.127 に答える