Refine By

Date picker

  • Contents:
  • Date pickers provide an intuitive way to select a date or range of dates.
  • They consist primarily of date fields and calendar flyouts. Additional features might include a “Nights counter” which computes the total number of nights selected by a user.
  • Date pickers allow our users to select a check-in and check-out date when making a reservation.

Guidelines

 

  • The first active date in a date picker should be the current date or a future date.
  • Previous dates should be disabled by default.
  • Use style elements such as color and font weight to distinguish selectable dates from inactive ones.
  • Highlight the selected dates in a range.
  • For non-scrolling date pickers, provide controls for navigating from one month to the next.

Selecting Dates

 

Style

 

 

 

 

 

 

 

 

 

 

 

 

 

Accessibility

 

 

  • Ensure that labels are provided that let the user understand the purpose of the date picker element
  • When the date picker opens, ensure that it is fully visible on the screen
  • Ensure that the date picker works in predictable ways
  • Make sure that the Month and Day names are read completely for screen reader users even if they are abbreviated on screen
  • Date picker elements should not be able to be interacted with by keyboard or screen reader unless they are expanded
Read More

Keyboard accessibility of the date picker

  • Ensure that users can navigate to the date picker. Make sure that there is a visible focus indicator that allows the user to understand that they are on a date field that will open the calendar selection element.
  • When using a date picker, ensure that it can be interacted with using only the keyboard and that it behaves in predictable ways. Non-mouse users will expect that:
    • The up and down arrows can be used to move to the previous and next week
    • The left and right arrows change the date by one day (right, one day forward; left, one day back). When the user reaches the end of the line, continuing left will move to the previous week; continuing right will move to the next week
    • Alt + Page Down should move to the same date in the next year
    • Home should move the first available day of the current month (if accessing on the 12th of the month, for example, pressing home should take the user to that day)
    • End should move focus to the last day of the selected month
    • The Page Up key should move to the same date in the previous month (if it can be selected)
    • The Page down key should move to the same date in the following month
    • The esc key should close the calendar and return focus to the element that opened the date picker
    • The enter key should select the date and move to the next field

 

Screen reader accessibility

  • Ensure the full names of months and days are announced for screen reader users
  • When a user selects a date, ensure that it is fully read – including the year – when a selection is made to help prevent incorrect selections

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Mar. 30 2018 8:03pm Linked to UI Kit
May. 08 2017 4:25pm Initial content entry