How do i filter a data column that has times

[Kevin]

The Angular Grid Filter Menu doc page (https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/) has a stackblitz example (https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts). The products.ts file in that example has dates but no times, e.g. new Date(1996, 8, 20). Filter by "is equal to" on 8/20/1996 returns one row, as expected. But when I modify that file and add a time, say 10:11:05, and filter by "is equal to" and enter date 8/20/1996, no results are returned. How can I supply exact times but filter only on date? I can create a filter using "is after or equal to" combined with "is before or equal to", but that is non-intuitive to my users. I could use the DateTimePicker, but the users don't want to select a time, they just want to select the date. There is a similar discussion in the forum (https://www.telerik.com/forums/filter-date-column-with-year) but that just has to do with the year. I could create a similar function, but that seems like overkill. Is there an easier way? 

[Zornitsa]

Hi Kevin,

Thank you for the details and resources provided.

Indeed, you are correct that the default behavior of the Grid's filtering functionality for the date columns is to return only these dates that entirely satisfy the filtering condition by both date and time. For this reason, when the date selected from the DatePicker component in the filter menu exists in the Grid data but has a different time, the respective date will not be displayed in the date column.

The reason behind this behavior is the fact that all components from the Date Inputs package use a valid JavaScript Date object as their value, which includes both the date and time part. In addition, when the built-in filter menu of type "date" is utilized, which represents a DatePicker component that does not provide an option to select a specific time, the selected date from this component will default to a date in UTC with time and a time zone equal to the one used by the browser (machine settings).

In this line of thought, as you mentioned that implementing a DateTimePicker component for the filter menu that will allow specifying the time as well is not desired, the developer would need to implement a manual filtering approach and customize the logic of the default filtering.

What I can suggest for achieving this would be to handle the filterChange/dataStateChange event of the Grid and modify the incoming date filter into a composite filter descriptor with operators 'gte' and 'lte', and set the logic to 'and'. In that way, since the filter will be adjusted internally, the users will be able to select the "Is equal to" operator and get the expected results. 

To better illustrate this approach, I am linking below a StackBlitz example that implements the suggested logic: 

• https://stackblitz.com/edit/angular-q9ynee 

It is important to mention that the demo aims to point the developer in the right direction, but the full implementation of this custom filtering approach is considered the developer's effort. For further reference about manual filtering, please refer to the following article from our documentation:

• https://www.telerik.com/kendo-angular-ui/components/grid/filtering/manual-filtering/ 

I hope the provided information sheds some light on the matter.

Regards,
Zornitsa
Progress Telerik