Forms
Date picker
Use this data entry type when capturing a date that is in the future such as a delivery date or booking date.
How to use the date picker
Date picker should not be used for date of birth as navigating back through years can be cumbersome and lead to mistakes.
Short term
If the user is required to select a date in the near future such as 1-2 months, the date picker should display fortnightly. This reduces cognitive load and allows the user to click/tap through each fortnight easily.
Longer term
If the user is selecting a date more than 2 months in advance, the date picker should display per month so the user can click through each month. Including a year dropdown within the date picker should be avoided as it becomes cumbersome and awkward. It is also unlikely that the user would need to select a date in the distant future. (See Google example)
Mobile devices
On mobile, users should be able to scroll or swipe through months as this is an easier interaction than tapping a small CTA.
Do
Clearly show a selected date via UI.
Use an appropriate date picker for relevant timescales.
Make it easy for users to change their mind after selecting a date.
Make navigating between months easy.
Consider the device the user is on.
Make it clear if a date is available unavailable/disabled via the UI.
Don’t
Use a date picker for date of birth.
Use a drop down for selecting the year.
Date range
Although less commonly used in our industry, there may be occasions where a date range needs to be selected by the user. E.g holiday payments.
These are displayed similarly to a date picker but need to allow for the following:
Show today’s date by highlighting the date in the calendar via UI.
Allow the user to easily browse through months.
First date selected should be the start date.
Second date selected should be the end date. (Users should not be allowed to select a date in the past).
The start and end date should be clearly highlighted in the calendar and visually highlight the days/dates in between the start and end date.
Tip
Users should be able to change their date range by selecting a new date which becomes the new start date.
Date range labelling
Use ‘to’ instead of a dash or slash in date ranges. ‘To’ is quicker to read than a dash, and it’s easier for screen readers.
Error state variants
Please select a date (If left empty)
Please select a date range (If left empty)
Help improve this page
To help make sure this page is as useful as it can be, relevant and kept up to date with industry best practices, please get in touch to share your research findings, and contribute to this page.
Propose a change or contribution by suggesting a feature request.
Email address
Ask for a user’s email address to provide a service or as a unique way of identifying them.
Email address
Ask for a user’s email address to provide a service or as a unique way of identifying them.