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


The TimePicker enables the user to render custom components instead of the default ones and, in this way, to customize most of the child TimePicker components which are otherwise inaccessible.

The user can replace the following TimePicker components with custom ones:

  • DateInput—Renders the input field in the TimePicker.
  • Popup—Renders the Popup which contains the Calendar.

Customizing the DateInput

The TimePicker and the DateInput communicate through the DateInputChangeEvent. In order for the TimePicker to work correctly with any form of time selection, provide a fully working input which calls the onChange property.

The following example demonstrates how to replace the default DateInput component with three native <input /> elements. To enable the user only to change a property and not have full control over the rendered content, pass a modified DateInput.

View Source
Change Theme:

Customizing the Popup

The Popup component inside the TimePicker acts as a container element with an absolute position. The TimePicker changes the show property on clicking the Toggle button or on blur. You can control show through the TimePicker.

The following example demonstrates how to further customize the Popup—the complete overriding of the Popup is also possible.