Pickers

Pickers provide a simple way to select a single value from a pre-determined set.

Date pickers use a dialog window to select a single date on mobile.

Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile. They adjust to a user’s preferred time setting.

Usage

On mobile, pickers are best suited for display in a confirmation dialog.

Tiles hold content, and can vary in height within a list.

Date pickers

A dialog picker is used to select a single date on mobile.

The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.

Swipe left to right to navigate through the months. Touch the year in the title bar to transition to the year view.

Date and year picker: Light theme, portrait, month display mode

Date and year picker: Light theme, portrait, decade display mode.

The picker has a landscape view as well to suite the different screen orientations.

Date picker: Light theme, landscape, month display mode

Date picker: Light theme, landscape, decade display mode.

A dark theme picker can complement apps that have a dark theme.

Date picker: Dark theme, portrait

Date picker: Dark theme, landscape

Time pickers

A time picker adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.

A dialog picker is used to select a single time (hours:minutes) on mobile.

The selected time is indicated by the filled circle at the end of the clock hand.

Tap between the hour and minute label in the title bar to switch between the hour or minute view. Additionally, tap on the AM/PM label in the title bar to switch between AM or PM (in 12-hour clock mode).

Time picker: Light theme, portrait

Time picker: Light theme, portrait

The picker has a landscape view as well to suite the different screen orientations.

Time picker: Light theme, landscape, hours selection.

Time picker: Light theme, landscape, minute selection

A dark theme picker can complement apps that have a dark theme.

Time picker: Dark theme, portrait

Time picker: Dark theme, landscape

DateTime pickers

DateTime picker contains both a Date picker and a Ticker and allows the selection of date and time.

Date Time picker: Light theme

DateTime picker also has a light and a dark theme

Date Time picker: Light theme

DateTime picker: Dark theme