New to Kendo UI for Vue? Start a free 30-day trial

Controlled Mode

By default, the DateRangePicker is in an uncontrolled state.

The DateRangePicker provides options for:

Controlling the Value

To manage the date value of the DateRangePicker:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.
Example
View Source
Change Theme:

Controlling the Popup State

To manage the popup state of the DateRangePicker and define whether the calendar will be displayed, use its show property.

Example
View Source
Change Theme: