Skip to content

Components - 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. For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.

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.

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.

to see different date & time pickers refer to Click Here.