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.
On mobile, pickers are best suited for display in a confirmation dialog.
For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.
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.
Date and year picker: Light theme, portrait
Swipe left to right to navigate through the months. Touch the year in the title bar to transition to the year view.
Date picker navigation
The picker view adapts to the device’s orientation.
Date picker: Light theme, landscape
A dark theme picker can complement apps that have a dark theme.
Date picker: Dark theme, portrait
Landscape view of the dark theme picker.
Date picker: Dark theme, landscape
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.
Time picker: Light theme, portrait
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 navigation
The picker view adapts to the device’s orientation.
Time picker: Light theme, landscape
A dark theme picker can complement apps that have a dark theme.
Time picker: Dark theme, portrait
Landscape view of the dark theme picker
Time picker: Dark theme, landscape