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

Controlled Mode

By default, the TimePicker is in an uncontrolled state.

The TimePicker provides options for:

Controlling the Date Value

To manage the date value of the TimePicker:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.

The following example demonstrates how to control the TimePicker value.

Example
View Source
Edit In Stackblitz  
Change Theme:

Controlling the Popup State

To manage the popup state and set the shown state of the TimePicker, use its show property.

The following example demonstrates how to control the state of the TimePicker time-selector upon display.

Example
View Source
Edit In Stackblitz  
Change Theme: