Date picker

Best practices

By default, selecting the date field opens the calendar view. The current date is outlined and the selected date is highlighted. The user can view and pick dates from the calendar view or manually type them in the text field.

When to use

• Allowing users to choose a date by clicking through the calendar.
• Limiting date options to a specific date.
• When asking the user for an exact, approximate, or memorable date.
• For scheduling tasks.

When not to use

• When the native date picking experience is preferred (typically mobile and web experiences). In this case, use Text input with type=”date”.

Anatomy

1. Label
2. Date field
3. Calendar icon
4. Next month control
5. Week day
6. Day in month
7. Selected day
8. Focused day
9. Calendar
10. Month and year controls
11. Previous month control

Behaviour

Date pickers default to showing today’s date when opened and only one month is shown at a time. It allows users to navigate through months and years but works best when used for recent or near future dates. If a user needs to input a far distant or future date consider having the calendar default open to a more convenient day.

Calendar

The date picker can be opened in two ways and remains open until a date is selected or focus is removed from the date field:

• Clicking the calendar icon in the field to the right
• Focusing the date field

Selecting a date

• Entering a date manually in the field
• Clicking on a date in the calendar
• Navigating to a date using the arrow keys and pressing enter

Selecting a month

• Clicking the chevron icons in the calendar to move forward and backward through the months
• Clicking on the month link to open the month view and then clicking on a month
• Using the shift key to focus on the month link, pressing enter to open the month view, and using the arrow keys to move to a month before pressing enter to select it
• Selecting a month, or pressing esc key switches to the main calendar view

Selecting a year

• Selecting then typing into the date input
• Clicking on the year link in the calendar to open the year view then clicking on a year
• Using the shift key to focus on the year link, pressing enter to open the year view, and using the arrow keys to move to a year before pressing enter to select it
• Using the chevrons to skip ahead or back multiple years or using the arrow keys to move one year at a time and populate the view with the next or previous set of years
• Selecting a year, or pressing esc key switches to the main calendar view

Closing the calendar

• Selecting a date automatically
• Clicking anywhere outside of the calendar
• Removing focus from the input
• Selecting then typing into the date input

Aligning the date menu

The calendar itself will always remain a fixed width and is not adjustable. It should always be aligned to the left edge of its assigned date field.

States

Calendar day states

Validation

Invalid dates should be clearly marked and display useful text to help users solve the issue.

Content guidelines

• Ensure that locale is appropriately set so that users see dates in a familiar format.
• If helper text is necessary, place helper text below the input.
• The labels should be clear and descriptive.