Date picker
A date picker allows users to select a single date or range of dates from a calendar.
How to use a date picker
A date picker helps users understand a date’s relationship to other days, such as the day of the week or how far away a date is from today. It’s particularly useful when users are scheduling tasks.
When using a date picker:
- Show today's date
- Disable dates that aren’t available
- Some users may find interacting with date pickers challenging, so the date picker gives users the option to enter the date with text input
If users need to enter a date many years in the future, use a text input instead of a date picker.
To change the default date format of the date picker, go to Moment.js to see the available formats.
Types of date pickers
Single date picker
Use a single date picker if users are selecting a specific date from the calendar.
Date range picker
Use a date range picker if users are selecting a ‘start’ and ‘end’ date from the calendar.
Copy guidelines
When using a date picker:
- Make the header of your date picker descriptive so users understand exactly what they’re selecting a date for
- If you’re confirming the selected date or date ranges to the user, refer to the date guidance in our style guide for best practice
Was this page helpful?
Get in touch
Our team can answer any questions about using date pickers or give you a helping hand with your next project.