Intro
Time pickers can be used to select a time or duration of time.
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.
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. See the Behavior and Interaction section for more information.
C. Footer
Includes the input icon button and “Cancel” and “OK” label buttons.
Anatomy of the time picker
Duration Picker
A. Header
Includes a customizable title to help remind the user what duration is being selected.
B. Previous Value Preview
Displays a preview of the previous value; the value that comes before the currently selected value.
C. Selected Value
Displays the currently selected value.
D. Next Value Preview
Displays a preview of the next value; the value that comes after the currently selected value.
E. Footer
Includes the “Cancel” and “OK” label buttons.
Anatomy of the duration picker
Behavior and Interaction
Time Picker
Selection
To select which value to update, users may tap on the hour or minute value containers. This changes the numbers displayed on the clock to hours or minutes.
To select an hour or minute value, the user may rotate the clock hand around the analog clock. This updates the selected hour or minute in the digital hour and time value containers. The default selected time is the current time.
The hour and minute values may be updated using the keyboard. The user may also navigate between them using the keyboard for accessibility.
Selecting a time in the time picker
AM/PM
To select whether the time is AM or PM, the user may tap on AM or PM in the AM/PM selector.
The user may also navigate between them using the keyboard for accessibility.
Switching from AM to PM in the time picker
Duration Picker
Selection
To select a time, users may scroll through a list of values. The value in the center is the selected value.
Selecting a duration in the duration picker
Cancel & OK
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
Time pickers include an input mode. This mode may be customized to be shown 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.
It is recommended to show the input mode for devices with small heights as the input-mode dialogs are smaller than the selection mode dialogs.
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.
The input mode for time pickers may be shown as default or for medium and expanded window classes if desired.
Time picker in landscape mode
Resources
Development: DateTimePickerFormCell (ViewBased), DurationPickerFormCell (ViewBased)
SAP Fiori for iOS: Pickers
Material Design: Date Pickers, Time Pickers
Related Components/Patterns: Date & Time Picker Form Cell, Dialogs, Date Pickers