Date picker

v1.2

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

CSS
Marko
React

Anatomy

Month navigators
Days
Date range start
Month and year
Date range selected
Date cell
Current date
Date range end
Container

Properties

Default picker

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.

Date range picker

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.

Double picker

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.

Date input

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.

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.