Date pickers
Date pickers are best used to provide users with a broad overview of previous and upcoming weeks. They are helpful if users are likely to select a date within 6 months from the current date (i.e. relatively recent), or if there are non-selectable or invalid dates they should take note of.
Resources
Types
Usage
- For mobile —
Use the native scrolling date picker when users are expected to select a single date that is further than six months from the current date. If the user is likely to pick a more recent date, the use of the calendar is preferred.
Use the native scrolling date picker when users are expected to select a single date that is further than six months from the current date. If the user is likely to pick a more recent date, the use of the calendar is preferred.
- For desktop —
Use the calendar for selecting a single date or date range, but still afford users the ability to type in the date directly into the field label.
- Choose reasonable default dates —
Choose a reasonable default date or date range. For example, the preset value of a local transfer transaction date should be today.
- Valid and invalid dates —
If there are invalid dates in your calendar (for example, dates without transactions), disable them. This reduces the likelihood of users encountering an error. Similarly, if there are restrictions as to which dates can be selected, this should be made clear to users beforehand.
- Birthday, expiry date, etc. —
If the user is expected to enter a date further than six months away (e.g. birthdays or credit card expiration dates), avoid using the calendar view and opt for a more direct data entry method.
Variations
There are two footer variations.
Behaviour
FAQs
- What would a single select date picker for selecting only one date look like?
Use the single panel display but restrict the date select to one input (not a range).