How can I use onKeyDown/onKeyPress event handlers in timePicker and datePicker react ( typescript) kendo library

[rakeshghumatkar]

I am trying to create Datepicker and timePicker as if I pressed space key, it will automatically take current date for date field if date is not selected ( date is not equal to null) and same functionality for timepicker too.

When I declared the onKeyDown/onKeyPress handler I am getting an error like onKeyPress/onKeyDown doesn't exist.

I checked the official kendo document for react I couldn't found anything related to this.

Any comments and suggestions are welcome.

[PekoPPT]

Hi, @rakeshghumatkar.
Here are two examples demonstrating the functionality you need to implement for the:

• DatePicker - https://codesandbox.io/p/sandbox/adoring-dawn-ql89q6?file=%2Fapp%2Fmain.tsx%3A30%2C1
• TimePicker - https://codesandbox.io/p/sandbox/pensive-wright-g83lqy?file=%2Fapp%2Fmain.tsx%3A26%2C5

To achieve the targeted functionality, we can wrap the DatePicker/TimePicker in a div element and add the onKeyDown/onKeyPress event handler to this wrapping element. In addition to the wrapping element, we need to use the DatePicker/TimePicker components in 'controlled' mode. This means that we need to define the value prop of the selected component and update this value every time the onChange event is triggered.

I hope that the above example will help you implement what you need. Please let us know if you need additional assistance with the implementation of the desired functioanlity.