Intro

Time pickers can be used to select a time or duration.

Time picker (left) and duration picker (right) in compact size

Usage

Do

Use a time picker for a time-related decision that the user needs to make.

Don't

  • Don’t use a time picker for picking a number that isn’t related to time.
  • Don’t use a time picker for selecting a date.
  • Customize the picker helper text to remind the user of the time being selected.
  • Keep the helper text consistent with the form cell label if the picker was invoked using a form cell.
  • Use the 12 or 24-hour format as needed for the time picker.

Anatomy

Time Picker

A. Header

Includes the selected time, helper text, and AM/PM selector.

B. Clock

Displays an analog clock that includes a clock hand that can be rotated to select an hour or minute.

C. Footer

Includes the “Keyboard” icon button and “Cancel” and “OK” label buttons.

Time picker anatomy

Duration Picker

A. Header
Includes a customizable title to remind users the duration being selected.

B. Previous Value Preview
Displays a preview of the previous value.

C. Selected Value
Displays the currently selected value.

D. Next Value Preview
Displays a preview of the next value.

E. Footer
Includes the “Cancel” and “OK” label buttons.

Duration picker anatomy

information
The duration picker is available in ViewBased only.

Behavior and Interaction

Time Picker

Time Selection

To select a value to update, users may tap on the hour or minute value. This changes the numbers displayed on the clock face to hours or minutes.

To select an hour or minute value, users may rotate the clock hand around the clock face. This updates the displayed digital time values. The default selected time is the current time.

The hour and minute values may also be updated using the keyboard.

Selecting a time in the time picker

AM/PM Selection

Users may toggle between AM or PM using the AM/PM selector.

Switching from AM to PM in the time picker

Duration Picker

information
The duration picker is available in ViewBased only.

Duration Selection

To select a duration, users may scroll through a list of values. The value in the horizontal center is the selected value.

Selecting a duration in the duration picker

Cancel and OK Selection

Tapping on the “Cancel” label button cancels any changes made to the time or duration selection and closes the picker dialog. Tapping on the “OK” label button saves any changes made to the time or duration selection and closes the picker dialog.

Variations

Input Mode

The time pickers include an input mode. This mode may be customized to be displayed as the default dialog when the picker is triggered. The user may switch to the picker selection mode by tapping on the “Clock” icon button in the dialog footer.

Time input dialog

Adaptive Design

Time pickers adapt to different window sizes.

  • For compact windows, the picker is shown in portrait mode.
  • For medium and expanded windows, picker is shown in landscape.

Time picker in landscape mode

Resources

Development: DateTimePickerFormCell (ViewBased), Time Pickers (Jetpack Compose), DurationPickerFormCell (ViewBased)

SAP Fiori for iOS: Pickers

Material Design: Date Pickers, Time Pickers

Related Components/Patterns: Date & Time Picker Form Cell, Dialogs, Date Picker