Date picker

v1.2

Date pickers allow users to choose a date or a range of dates.

  • Skin
  • Marko
  • React
Stylized graphic of a date picker.

Anatomy

Properties

Behavior

Navigating months

Both single and double pickers navigate horizontally via the top-right controls or by swiping left or right on the dates. Full screen dialog pickers scroll vertically.

Platforms

Native pickers

Native Android and iOS devices leverage the OS date pickers.

Android

Android devices use the Material date picker component. The Material date picker is available in a docked popover or modal variant.

iOS

iOS devices use the native picker components. These are available as popovers or inline pickers.

Screen sizes

Small

Date pickers in native apps use the OS pickers. HTML uses the popover or fullscreen dialog version.

Best practices

Specs