DateRangePicker validate the entered dates of the DateRangePicker

Environment

Product Version	6.0.2
Product	Progress® KendoReact DateRangePicker

Description

I want validate the dates that are added to the DateRangePicker through its input element using either the keyboard or arrow keys.

Solution

You can achieve this by custom rendering the date inputs which allows you to get their values in the onChange event handler. The value can be compared to the min or max date value that is passed through props to check if the entered date is valid or not. When the date is invalid, you can show the Error component or Popup component to display an error message:

Here is an example demonstrating this approach:

Change Theme

Theme

Loading ...