The picker component is used for time-based selections. There are three types of pickers: date picker, time picker and time duration picker. Pickers are always displayed in a dialog.

Usage

Do’s

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

Don’ts

• Don’t use a picker for picking a number that isn’t related to time.
• Don’t use the date picker for selecting a duration of time and don’t use the time duration picker for selecting a date.

Structure

Time Picker

A. Header
Includes the text for the time for hour and minute with a selector for choosing AM or PM.

B. Clock
Imitates the look of an analog clock in order to display the time for the user to select.

C. Clock Hand
The clock hand shows what the user selects for the hour and the minute by rotating to the number the user chooses.

D. Footer Bar
The footer bar houses the buttons for confirming or dismissing the dialog.

Time Duration Picker

A. Title
Describes what this time duration picker is for or instructs the user on what to do.

B. Previous Value Preview
The value dial shows a preview of the previous value at the top. There is a slight white gradient on top of the numbers for less emphasis.

C. Selected Value
The value in the center, marked with a blue border on the top and bottom, is the selected value.

D. Next Value Preview
The value dial shows a preview of the next value at the bottom. There is a slight white gradient on top of the numbers for less emphasis.

E. Footer Bar
The footer bar houses the buttons for confirming or dismissing the dialog.

Types

Date & Time Picker

The date picker allows the user to select a specific date with the calendar and the time picker allows the user to select a specific time through the clock.

In some cases the picker may allow the selection of both date and time picker in a sequence. If that is the case, the picker has two parts to the dialog, where the first dialog displays the interface for picking a month, day, and year, and the second dialog is for selecting the specific time based on an analog clock interface.

Time Duration Picker

In the time duration picker, the user scrolls to a value from the list. Once the desired value reaches the center of the picker, that is the value that will be used.

Behavior

Please follow the guidelines for dialogs for the behavior for pickers.

To learn more about the form cell to trigger the dialog, follow the guideline for the time picker form cell.

Time Duration Picker

The time duration picker is a spinning dial where the users rotate through the numbers to select the value they want at the center. It is formatted to show hours and minutes.

Specs

Date Picker

*The date pickers uses the Roboto font in the calendar. It will be converted to the 72 font in a future update.

Time Picker

*The time picker uses the Roboto font in the clock. It will be converted to the 72 font in a future update.

Time Duration Picker

Date Picker Colors

Time Picker Colors

Time Duration Picker Colors