Intro

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:

• To select a time.
• 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.
• To select a specific duration, such as 1 minute and 30 seconds.

Don’t use the time picker:

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

Anatomy

Time Picker

1. Time picker input field: The container in which a user enters data. It contains a mask.
2. Time picker button: The button that opens the time picker popover-.
3. Time picker popover

4. Hours field: Displays the hour entered or selected.
5. Minutes field: Displays the minutes entered or selected.
6. Seconds field (optional): Displays the seconds entered or selected. You can add the seconds field if it’s relevant for your use case. The recommended display format doesn’t include seconds.
7. AM/PM switch. The switch is displayed if the user has opted for the 12-hour format.
8. Clock face for selecting the time: The appearance of the clock face depends on the focus (hours, minutes, or seconds) and the time format (12-hour or 24-hour clock).
9. Footer: With OK and Cancel buttons.

Clock Face

1. Tick marks
2. Clock face circle
3. Number selector
4. Selected hours/minutes/seconds
5. Hours/minutes/seconds label

Variants

24-Hour Clock Face

12-Hour Clock Face

Selection of Seconds

Input Placeholder

Value States

Behavior and Interaction

Selecting a Time

To enter a time, the user can either type the value in the input field or choose the values from the time picker popover and built-in clock interface. By default, the time fields in the time picker popover show the current time. Users can edit this value in the time picker popover in two ways:

• By clicking on a value or tick mark on the clock face to select the corresponding time value. Even if the time doesn’t initially display a number, it becomes visible upon hover or click.
• By dragging the mouse round the clock face for more precision.

Once a value has been selected, the focus automatically moves to the next time field in the sequence (for example, from hours to minutes). The clock face shows the current value for this field (for example 30 minutes). Once the value for the last time field has been selected, the focus remains unchanged.

To change a time value, the user can click on the corresponding time field (for example, hours) and choose a different value on the clock face.

Clicking the OK button confirms the selected time. Clicking Cancel or clicking anywhere outside the popover discards the changes.

Shortcuts

You can use the following shortcuts to enter a specific time.

• “now”
• “in 1 hour” / “in x hours”
• “1 hour ago” / “x hours ago”

The system calculates the time automatically and enters it in the input field.

Responsive Behavior

On a tablet or mobile device, tapping the input field opens a popover. To set the value, the user enters the desired value in each input field within the popover.

Tapping the time picker button within the input field opens the time picker popover.

On smartphones, the popover is displayed as a full screen dialog.

Related Links