Reverse Selection

By default, the DateRangePicker auto-corrects the selection from its calendar to a range where the start value is always before the end value.

Getting Started

However, the DateRangePicker allows you to implement reverse date-range selection by setting its allowReverse property to true.

The following example demonstrates how to enable the reverse selection from the Calendar component.

Swapping Start and End Dates in Ranges

Along with the reverse selection logic, you can also render a button to swap the start and end date values. To display the swap button, set the swapButton and allowReverse properties to true.

To enable the reverse selection from the Calendar without rendering a swap button, provide the allowReverse property and set the swapButton property to false.

Suggested Links

• API Reference of the DateRangePicker
• Kendo UI Productivity Tools extension for VS Code