Vue Grid (Native) filtering not working for dates

[Dhanushka]

Hi,

Trying to implement grid (native) filtering. It has a date time column. Filtering seems to not work for this column.

https://stackblitz.com/edit/gqlmpp

[Ivan Danchev]

Hi Dhanushka,

The values of the "date" field in the data should be actual Date objects, for example:

"date": new Date(2019, 7, 15)

instead of string:

"date": "2018-08-15T00:00:00"

This will make date filtering possible. For example see this screenshot, in which we filter for dates after August 13 2019, and only the first record matches this condition. 

Regards,
Ivan Danchev
Progress Telerik

[Dhanushka]

Thanks Ivan for the clarification.

We still face an issue when trying to filter a date column with "eq" operator. Although there are dates with new (2019, 10, 8) it doesn't seem to filter any of them. After debugging, noticed that the time portion is 11:00:00 instead of 00:00:00 for the date entered in the filter input. See attachment. So probably, date comparison fails because of the time difference.

I can get it to work if I force the date object to be new Date(2019, 10, 8, 11).

 

 

 

 

[Ivan Danchev]

Hello Dhanushka,

Filtering treats dates as UTC, but when the dates are create on the client thy are offset based on the browser's local time (e.g. Australian Eastern Daylight time in your case). Thus, to ensure the timezones do not affect filtering, create the date object using UTC time instead of local time:  

"date": new Date(Date.UTC(2019, 10, 8))

This way date comparison won't fail because of timezone difference: screenshot.

Regards,
Ivan Danchev
Progress Telerik

[Dhanushka]

Hi Ivan,

Why does the date picked from the date picker control is treated as UTC and not local?

Say if I pick 14/11/2019,

the date object should be Thu Nov 14 2019 00:00:00 GMT+1100 (Australian Eastern Daylight Time).

But Kendo treats this picked date as UTC and converts back to local. 

So that now it becomes, Thu Nov 14 2019 11:00:00 GMT+1100 (Australian Eastern Daylight Time).

The data will be fetched from an API which might return a date like "2019-11-14T00:00:00+11:00". If we need the filtering to process on this same data it's not going to work properly. But if the picker date is treated as local no conversions are required on the data.

What do you think?

*We have logged a support ticket (1442120) for this through our licensed account.

 

 

[Ivan Danchev]

Hello Dhanushka,

After further investigation the discussed behavior has been logged for fixing.

Regards,
Ivan Danchev
Progress Telerik

[Dhanushka]

Hi Ivan,

Is this fixed? Where can I find a status?

 

[Ivan Danchev]

Hello Dhanushka,

Here's the respective but report item in our repo: https://github.com/telerik/kendo-vue/issues/42

The bug hasn't been fixed yet and at present its status is "unplanned". We have been working on other bugs with higher priority, so unfortunately we haven't planed the fix of this bug for a specific release yet.

Is the fix of this particular bug important to the project you are working on?

Regards,
Ivan Danchev
Progress Telerik