# Controlled Mode

By default, the DateRangePicker is in an uncontrolled state.

The DateRangePicker provides options for:

* [Controlling its value](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker/controlled-state#controlling-the-value)
* [Controlling its popup state](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker/controlled-state#controlling-the-popup-state)

## Controlling the Value

To manage the date value of the DateRangePicker:

1. Use its [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#value) property.
2. Handle the [`onChange`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#onchange) event.
3. Pass the new value through the props.

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

## Controlling the Popup State

To manage the popup state of the DateRangePicker and define whether the calendar will be displayed, use its [`show`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#show) property.

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

## Suggested Links

* [API Reference of the DateRangePicker](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops)