New to KendoReact? Start a free 30-day trial
DatePicker with Custom Popup Buttons and Focus Handling
Updated on Dec 19, 2025
Environment
| Product Version | 12.0.0 |
| Product | Progress® KendoReact DatePicker |
Description
How can I add custom buttons in the DatePicker popup for quick date selection (such as "Today" or "Next Week") while ensuring the popup behaves correctly—staying open when interacting with custom buttons but closing when clicking outside?
This knowledge base article also answers the following questions:
- How to add custom buttons in the KendoReact DatePicker popup?
- How to handle focus and blur events properly in DatePicker with custom popup?
- How to keep the popup open when interacting with custom buttons?
- How to use React Context to manage DatePicker values from custom components?
- How to implement quick date selection functionality?
Solution
To add custom buttons in the DatePicker popup with proper focus handling, you need to:
- Create a custom Popup component using the
popupproperty of the DatePicker - Use React Context for communication between custom buttons and the main component
- Handle focus/blur events properly using the
useAsyncFocusBlurhook from@progress/kendo-react-common - Manage popup state through DatePicker's event handlers
The following example demonstrates a complete implementation:
Change Theme
Theme
Loading ...