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
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.
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.