Calendar picker

When to use this component

Calendar pickers are optimal for scheduling upcoming tasks or indicating recent dates. Use one when it's helpful to see a date in relation to today, or other days of the week. It is also helpful if a user needs to pick more than one day in relation to another (like a start and an end).

When not to use this component

Do not use the calendar picker component when you’re asking users for a date they’ll already know. This could be a birthday, or another date they can look up without using a calendar. An example of this is if a user has a document showing a date you're requesting, like an expiry date. Use the date fields pattern instead.

How it works

Calendar pickers default to showing today’s date and only one month is shown at a time. Calendar pickers navigate one month at a time so they work best when used for recent or near future dates. For example, if someone is older than 10, they would have scroll back quite far to find their year of birth.

If a calendar picker is best, but the expected entry is not close to today, default to open near a more convenient month. Or consider offering the option of both text entry or calendar picker. It's important to test with your users if you change a picker default to ensure users succeed.t open to a more convenient day.