# Controlled Mode

By default, the Kendo UI for Vue DatePicker is in an uncontrolled state.

The DatePicker provides options for:

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

## Controlling the Date Value

To manage the date value of the DatePicker:

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

The following example demonstrates how to control the DatePicker value.

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

## Controlling the Popup State

To manage the popup state of the DatePicker, use its [`show`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/datepickerprops#show) property, to set the shown state of the component.

The following example demonstrates how to control the state of the DatePicker calendar upon display.

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

## Suggested Links

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