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.

  • Interactive demo - Sainsbury's

Date range picker

Use a date range picker if users are selecting a ‘start’ and ‘end’ date from the calendar.

  • Interactive demo - Sainsbury's

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.
Select a theme to demo: