A datepicker is a text input to capture a date. You can select a single date, date range or date and time.
Implementation Notes and Requirements
The datepicker has the following markup requirements:
.slds-is-opento the element with
.slds-dropdown-triggerto invoke the dropdown that contains the datepicker.
.slds-is-selectedmodifier class is required on the
tdelement that has the selected day.
.slds-is-todaymodifier class is required on the
tdelement that is the current day.
.slds-has-multi-selectionmodifier class is required on the
trelement that contains multiple days selected in the same week.
.slds-has-multi-row-selectionmodifier class is required on any
trelement that contains multiple days selected in the multiple weeks.
.slds-is-selected-multimodifier class is required on the
tdelement that contains a selected day within a range.
- When on mobile, we want to leverage the native date picker by changing 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="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
- On the
inputthat we just added
type="date"to, please remove
- On the element with the class
- Should act as a focus trap so the user only cycles through the datepicker
dialogwhen the datepicker is open
- Table must be labelled with
role="grid"and be appropriately labelled with
aria-multiselectable="true"to allow for selection of multiple days
- Should act as a single focus stop
- All dates should have
- If a date is selected,
aria-selectedshould be set to
trueon the corresponding
aria-currentis used to indicate which day is today and should be set to
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
spaceon 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
rightarrow keys to navigate row
downarrow keys to navigate between weeks on the same day
endkeys to jump to beginning or end of current row
pageupto naviate between months
alt + pagedownand
alt + pageupto navigate between years
enterto select date and close datepicker
escto close datepicker without choosing a date
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.