Pickers
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.
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 |