Intro

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

Date Picker

A. Header
Includes the text describing the usage of the date, year, and then the abbreviated name for the day of the week with the abbreviated name for month and the day.

B. Month Selector
The arrows can move ahead or back in month increments to quickly access a different month than the default value.

C. Day of the Week
The day of the week is represented by a single letter.

D. Calendar
The rows of the days coordinates with the day of the week to lay out all the days of that month.

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




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

Sample Element Alpha Hex
Header background #6A6D70
Date text #FFFFFF
Year text #B3FFFFFF or #FFFFFF with 70% opacity
Selected date text #FFFFFF
Month selector text #32363A
Day of the week #8a000000 or #32363A with 54% opacity
Day in numbers #32363A
Selected day/time circle #0854A0
Text button color #0A6ED1


Time Picker Colors

Sample Element Alpha Hex
Header background #6A6D70
Active time value #FFFFFF
Inactive time value #8AFFFFFF or #FFFFFF with 54% opacity
Selected day/time circle #0854A0
Clock hand #0854A0
Clock background #EEEEEE
Text button color #0A6ED1


Time Duration Picker Colors

Sample Element Alpha Hex
Dialog background #FFFFFF
Title text #32363A
Selected value border #0854A0
Selected value text #32363A
Divider lines #EEEEEF
Text button color #0A6ED1