Docs

Time Picker

Time Picker is an input field for entering or selecting a specific time.
<TimePicker label="Alarm" value="07:00" />

The time can be entered directly using a keyboard or by choosing a value from a set of predefined options presented in an overlay. The overlay opens when the field is clicked or any input is entered when the field is focused.

Common Input Field Features

TimePicker includes all Text Field and shared input field features.

Step

Time Picker’s step parameter defines the interval (in seconds) between the items displayed in the overlay. It also specifies the amount by which the time increases/decreases using the Up/Down arrow keys (when the overlay is disabled).

The default step is one hour (that is, 3600). Unlike Number Field, Time Picker accepts values that don’t align with the specified step.

<TimePicker label="Meeting time" step={60 * 30} value="12:30" />
Note
Use common steps
The step must divide an hour or day evenly. For example, "15 minutes", "30 minutes" and "2 hours" are valid steps, whereas "42 minutes" isn’t.

The displayed time format changes based on the step.

<TimePicker label="Meeting time" step={1} value="15:45:08" />
Important
You can find more information in the corresponding article on vaadin.com.