Prevent Arrow Keys from Changing the Value in React DateRangePicker

Updated on Dec 19, 2025

Environment

Product Version	10.1.0
Product	Progress® KendoReact DateRangePicker

Description

In this guide, you will learn how to prevent the arrow keys from changing the selected value in the DateRangePicker component. This can be useful when you want to restrict the user from modifying the value using arrow keys.

Solution

To prevent the arrow keys from modifying the selected value in the DateRangePicker, you can add event listeners for the keydown events of the input element and conditionally prevent the default behavior of the arrow keys.

Here is an example implementation:

Change Theme

Theme

Loading ...