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 MultiViewCalendar component.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 MultiViewCalendar without rendering a swap button, provide the allowReverse property and set the swapButton property to false.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?