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
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme: