Date picker
v1.2
Date pickers allow users to choose a date or a range of dates.
- Skin
- Marko
- React
Date pickers allow users to choose a date or a range of dates.
Android date picker
iOS date picker
Native date picker
HTML full screen date picker
Default picker
Double picker
Vertical double picker
Selection states
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.
Android devices use the Material date picker component. The Material date picker is available in a docked popover or modal variant.
iOS devices use the native picker components. These are available as popovers or inline pickers.
Date pickers in native apps use the OS pickers. HTML uses the popover or fullscreen dialog version.
The default picker allows for a single date selection. The current date is always visible.
Dates can be disabled if they are outside of the allowed time range. This can be days prior to the current day for scheduling events, or a maximum date range for events in the past.
The date picker can also allow the selection of a range of dates. The first tap sets the starting date and a second tap sets the ending date. A third tap resets the date range and sets the new starting date.
On larger screens, two months can be shown at a time using the double picker. This larger picker behaves the same as the single picker when navigating, selecting, and setting date ranges.
The date picker is typically triggered by a date input field. Simple, memorable dates will accept text input with the option to reveal a date picker calendar when interacting with the calendar icon.
There are multiple states for dates to indicate if they can be selected, if they are selected, what the current day is, and whether a range is set.
Date pickers in native apps on tablet use the native OS pickers. HTML uses the popover pickers.
Do allow users to quickly enter short dates or times.
Don’t use a date or time picker when text entry would be quicker and more convenient.
