Filtering DateTime Fields in React Data Grid

Environment

Product Version	11.1.0
Product	Progress® KendoReact Grid

Description

I am using the Kendo React Data Grid and have filters on my columns. These filters work fine except when attempting to use a date filter on a DateTime field. I want to filter by both date and time or by date only.

This knowledge base article also answers the following questions:

• How can I filter DateTime fields in the Kendo React Data Grid?
• Is it possible to filter by both date and time in the React Data Grid?
• How to customize the filter component for DateTime fields in React Data Grid?

Solution

To filter DateTime fields in the Kendo React Data Grid, use a custom filterCell component to replace the default DatePicker with a DateTimePicker. Both components work with JavaScript Date objects, enabling filtering by date and time.

Filtering with Custom Filter Cell

1. Create a custom filter cell component that uses the DateTimePicker.
2. Pass the custom filter cell to the column's filterCell property.

Change Theme

Theme

Loading ...

See Also

• React Data Grid Documentation
• React DateTimePicker Documentation
• React DatePicker Documentation
• React Data Grid Filtering Documentation