Datepickers

Datepickers

A datepicker is a text input to capture a date. You can select a single date, date range or date and time.

Base

Preview

About Datepickers

Implementation Notes and Requirements

The datepicker has the following markup requirements:

Desktop

  • Add .slds-is-open to the element with .slds-dropdown-trigger to invoke the dropdown that contains the datepicker.
  • The .slds-is-selected modifier class is required on the td element that has the selected day.
  • The .slds-is-today modifier class is required on the td element that is the current day.
  • The .slds-has-multi-selection modifier class is required on the tr element that contains multiple days selected in the same week.
  • The .slds-has-multi-row-selection modifier class is required on any tr element that contains multiple days selected in the multiple weeks.
  • The .slds-is-selected-multi modifier class is required on the td element that contains a selected day within a range.

Mobile

  • When on mobile, we want to leverage the native date picker by changing the input type from text to date
  • The input type="date" will create an input field allowing a date and time to be easily entered — this includes year, month, day.
  • When switching input type="text" to input type="date" for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.
    • On the element with the class slds-combobox, please remove role="combobox", aria-expanded, and aria-haspopup.
    • On the input that we just added type="date" to, please remove aria-controls, aria-autocomplete, and role="textbox".

Accessibility

Expected Markup

Dialog
  • Should act as a focus trap so the user only cycles through the datepicker dialog when the datepicker is open
Grid
  • Table must be labelled with role="grid" and be appropriately labelled with aria-labelledby
  • Use aria-multiselectable="true" to allow for selection of multiple days
  • Should act as a single focus stop
Gridcell
  • All dates should have role="gridcell" and aria-selected="false" on the gridcell by default
  • If a date is selected, aria-selected should be set to true on the corresponding gridcell
  • aria-current is used to indicate which day is today and should be set to aria-current="date"

Opening the Datepicker

  • Mouse user: open the datepicker when a mouse user clicks on the input
  • Keyboard user: only open the datepicker when a keyboard user presses enter or space on the datepicker button
    • Do not open the datepicker when user focus is on the input

Expected Keyboard Interactions

  • When the datepicker opens, place user focus on either the currently selected date in the grid or if no date is selected the current day
  • left and right arrow keys to navigate row
  • up and down arrow keys to navigate between weeks on the same day
  • home and end keys to jump to beginning or end of current row
  • pagedown and pageup to naviate between months
  • alt + pagedown and alt + pageup to navigate between years
  • enter to select date and close datepicker
  • esc to close datepicker without choosing a date

Overview of CSS Classes

Selector.slds-datepicker
Summary

Initiates a datepicker component

Restrictdiv
VariantTrue
Selector.slds-day
Summary

Style for calendar days

Restrict.slds-datepicker td span
Selector.slds-is-today
Summary

Indicates today

Restrict.slds-datepicker td
Selector.slds-is-selected
Summary

Indicates selected days

Restrict.slds-datepicker td
Selector.slds-datepicker__filter
Summary

Aligns filter items horizontally

Restrict.slds-datepicker div
Selector.slds-datepicker__month_filter
Summary

Spaces out month filter

Restrict.slds-datepicker div
Selector.slds-datepicker__month
Summary

Container of the month table

Restrict.slds-datepicker table
Selector.slds-disabled-text
Summary

Indicates days that are in previous/next months

Restrict.slds-datepicker td
Selector.slds-has-multi-selection
Summary

Class on row to notify that more than one date will be selected within the week

Restrict.slds-datepicker tr
VariantTrue
Selector.slds-has-multi-row-selection
Summary

Class on row to notify that more than one date will be selected with multiple weeks

Restrict.slds-datepicker tr
Selector.slds-is-selected-multi
Summary

Indicates if the selected days are apart of a date range

Restrict.slds-datepicker td

No content has been added for this component.

No content has been added for this component.