The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.
When to Use
Use the time picker if:
- Users need to select a time.
- Users need to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time.
Do not use the time picker if:
- Users need to select a specific duration, such as 1 minute and 30 seconds.
- Users need to select a standard duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the select control instead.
The time picker consists of a time input field (1). Users can enter a time directly or use the time picker button (2) to select a time using the time picker popover (3).
On mobile and tablet devices, selecting the time input field opens a time input popover (A) for entering the time with the touch keyboard.
The time input field can also contain a placeholder (input prompt).
Time Picker Popover
In the time picker popover, the user can select a time by using the clock face to set hours, minutes, and seconds.
The full time is always displayed at the top of the popover.
If the user has opted for the 12-hour format in the user settings, an AM/PM switch is also displayed.
If seconds are not relevant for the use case, you can remove the seconds field.
Hours Clock Face
Depending on the time format, the hours clock face shows 12 hours or 24 hours:
- The 12-hour clock face shows only one circle.
- The 24-hour clock face shows an additional inner circle for the times from 13:00 to 24:00 hours.
Minutes Clock Face
When the minutes value is selected in the time display, the minutes clock face is shown.
Behavior and Interaction
Users can enter the time in two ways:
- Enter a time directly in the input field
- Select a time using the time picker popover
Selecting a Time with the Time Picker Popover
By default, the time picker shows the hours clock face, and the hour value is highlighted in the time display at the top of the popover. On desktop devices, users can select the hour using a mouse or the keyboard arrows. Tablet and mobile device users can drag the handle around the dial to the desired number, or tap the number on the dial. The selected hour is then entered in the time display at the top.
When an hour value is set, the hours clock face automatically switches to the minutes view: the minutes clock face is shown and the minutes value is highlighted in the time display. If an hour was selected by mistake, the user can switch back to the hours clock face by selecting the hours value.
Minutes and seconds are selected in the same way.
Clicking the OK button confirms the selected time. Clicking Cancel or clicking anywhere outside the popover discards the changes.
You can set a predefined time, which shows as the initial value in the time input field and the time picker popover. If you don’t set a default time at application level, the control defaults to the current time. Users can overwrite the initial value.
You can prevent users from making incorrect entries by only allowing certain characters (see mask input). If the user enters a time that has the correct format but is invalid (such as 12:60:85), the time picker displays a validation error (see input validation).
You can switch off the integrated mask input feature, but we strongly recommend using it. Only deactivate mask input if you need to make an exception for your use case (for example, if a variable length is required for a specific locale).
The time picker has five basic value states:
For the information, warning, and error states, you can also display a message with additional information below the field.
The time picker comes with a cozy mode and a compact mode. In the compact mode, the time input field and the button are smaller than in the cozy mode. For more information, see Content Density.
For mobile (size S) devices, the time picker popover does not open below the time input field, but in a subview.
Only let the user select time in seconds if this information is really necessary.
If the user has to set a time that is time zone-sensitive, offer a select control next to the time picker control to choose the appropriate time zone.
For more information, see Formatting Time.
AM and PM are locale-dependent. You can set the locale with the property
You can define the display format for the time in the input field and at the top of the time picker popover (property:
displayFormat). For more information about time formats, see Formatting Dates.