components
DatePicker (design)
Allows users to enter a date. This can be done by either having the fill out the date via an input, but also provides the user with a calendar view for easier date selection.
Usage
Use a datepicker when a user has to select a single date or date range from a grid style calendar or by typing in a date corresponding to the placeholder.
Behaviour
Clicking the calendar icon triggers the calendar dialog. Within the dialog, the current date is indicated by an active colored state. Switching between months can be done by toggleing the previous or next arrow.
Selecting a single date can also be done by typing in the date as indicated by the placeholder text.
Dekstop DatePicker
Mobile DatePicker
Guidelines
- The calendar dialog is closed after a single date is selected.
- Provide obvious defaults and highlight commont selections.
- Follow agreed-upon date formats.