New to KendoReact? Start a free 30-day trial
Filtering DateTime Fields in React Data Grid
Updated on Dec 19, 2025
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 ColumnMenu 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 Column Menu
- Create a custom column menu that includes a
DateTimePicker. - Attach the custom column menu to the
columnMenuproperty of the specific column.
Change Theme
Theme
Loading ...