Datepickers

Datepickers

A datepicker is a non text input form element. You can select a single date or date range from a popup or inline calendar.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

If you desire a multi-select date range, the selected cell will need to have .slds-is-selected-multi applied. Another scenario would be a multi range selection spanning over two or more weeks. If this scenario is true, each <tr> will need the class .slds-has-multi-row-selections added.


Overview of CSS Classes

Selector.slds-datepicker
Summary

Initiates a datepicker component

Supportdev-ready
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
ModifierTrue
Selector.slds-is-selected-multi
Summary

Indicates if selected days are apart of a date range

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

Helper class that styles date range appropriately

Restrict.slds-datepicker tr
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
ModifierTrue