# 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`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops) property to `true`.

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/daterangepicker/reverse/basic/source.txt)

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#swapbutton) and [`allowReverse`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#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`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/daterangepicker/reverse/swap/source.txt)

## Suggested Links

* [API Reference of the DateRangePicker](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)