Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You placed the <code>parse</code> function in the <code>grid</code> definition and not in the <code>datasource</code>. You also need to provide a format that matches the one being received ("yyyy-MM-dd HH:mm:ss"). Try this:</p> <pre><code>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; } } </code></pre> <p>I would also do a couple of additional changes:</p> <ul> <li>Include <code>format</code> definition in your <code>DateTimePickers</code> to match the format in the <code>Grid</code>:</li> </ul> <p>Code:</p> <pre><code>$("#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" }); </code></pre> <ul> <li>Change <code>blur</code> event by <code>change</code> event to make it get fired only if the value of the input field actually changes.</li> </ul> <p>Code:</p> <pre><code>$("#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); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload