How to filter Kendo Ui Grid with DateRange?

Question

Currently I am using Kendo Ui Grid and I try to filter by DateRange . At the moment my code goes like this:

HTML:

<kendo-grid-column field="createdate" title="Creation Date" width="150">
 <ng-template kendoGridFilterCellTemplate let-filter>
  <app-date-range-filter-cell class="date-range-filter" [filter]="filter" field="createdate">
  </app-date-range-filter-cell> 
 </ng-template>
</kendo-grid-column>

In my response I have createdate: "2019-04-19T15:47:48.000+0000" and I show it in my Grid like this createdate: "19/04/2019, 18:47:48" using:

this.createdate = this.datePipe.transform(this.createdate, 'dd/MM/yyyy, HH:mm:ss');

I need make filtering by DateRange works only by date because Kendo DateRange works with type Date and mine is type string . Any help?

Answer 1

I have found my solution here. I did the following steps:

a) Converted string dates into type Date with:

this.createdate = new Date(this.createdate);

b) I changed the format of date in my html like that:

<kendo-grid-column field="createdate" title="Creation Date" width="150" format="{0: dd/MM/yyyy, HH:mm:ss}">
  <ng-template kendoGridFilterCellTemplate let-filter>
    <app-date-range-filter-cell class="date-range-filter" [filter]="filter" field="createdate">
    </app-date-range-filter-cell>
  </ng-template>
</kendo-grid-column>

And voila you can use DateRange for column with dates in Kendo Ui Grid.