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

No content has been added for this component.

No content has been added for this component.

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