Time Picker
Time Picker is an input field for entering or selecting a specific time.
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.
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.
new tab
<vaadin-time-picker
label="Meeting time"
value="12:30"
.step="${60 * 30}"
></vaadin-time-picker>|
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.
new tab
<vaadin-time-picker label="Message received" value="15:45:08" step="1"></vaadin-time-picker>| Step | Format |
|---|---|
Less than 60 seconds | HH:MM:SS |
Less than 1 second | HH:MM:SS:FFF |
|
Note
|
Limit the number of steps
The overlay doesn’t appear for steps less than 900 seconds (15 minutes), to avoid showing an impractical number of choices.
|
Auto Open
The overlay opens automatically when the field is focused using a pointer (mouse or touch), or when the user types in the field. You can disable this, to open the overlay only when the toggle button or Up/Down arrow keys are pressed.
new tab
<vaadin-time-picker
label="Alarm"
value="05:30"
.step="${60 * 30}"
auto-open-disabled
></vaadin-time-picker>Validation
Minimum and Maximum Value
You can define a minimum and maximum value for Time Picker if you need to restrict the input to a specific range:
new tab
<vaadin-time-picker
label="Appointment time"
helper-text="Open 8:00-16:00"
value="08:30"
min="08:00"
max="16:00"
.step="${60 * 30}"
error-message="${this.errorMessage}"
@change="${(event: TimePickerChangeEvent) => {
const { min, max, value } = event.target;
if (value < min) {
this.errorMessage = 'Too early, choose another time';
} else if (value > max) {
this.errorMessage = 'Too late, choose another time';
} else {
this.errorMessage = '';
}
}}"
></vaadin-time-picker>Custom Validation
If the minimum and maximum values aren’t sufficient for validation, you can also apply custom validation.
new tab
private binder = new Binder(this, AppointmentModel);
protected override firstUpdated() {
this.binder.for(this.binder.model.startTime).addValidator({
message: 'The selected time is not available',
validate: (startTime: string) =>
(startTime >= '08:00' && startTime <= '12:00') ||
(startTime >= '13:00' && startTime <= '16:00'),
});
}
protected override render() {
return html`
<vaadin-time-picker
label="Appointment time"
helper-text="Open 8:00-12:00, 13:00-16:00"
min="08:00"
max="16:00"
.step="${60 * 30}"
${field(this.binder.model.startTime)}
></vaadin-time-picker>
`;
}Best Practices
Use Time Picker when the user needs to choose a time of day. Don’t use it for durations, such as for a stopwatch or timer.