Datepickers

datepickers

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

base

.slds-datepicker — Initiates a datepicker component

base › Datepicker in a Data Table

base › Datepicker with date selected in a Data Table

base › Datepicker with an error in a Data Table

.slds-disabled-text

.slds-disabled-text

.slds-day

.slds-day — Style for calendar days

.slds-is-today

.slds-is-today — Indicates today

.slds-is-selected

.slds-is-selected — Indicates selected days

.slds-datepicker__filter

.slds-datepicker__filter — Aligns filter items horizontally

.slds-datepicker__filter_month

.slds-datepicker__filter_month — Spaces out month filter

.slds-datepicker__month

.slds-datepicker__month — Container of the month table

.slds-day_adjacent-month

.slds-day_adjacent-month — Indicates days that are in previous/next months

range

.slds-has-multi-selection — Class on row to notify that more than one date will be selected within the week

range › Default in a Data Table

range › Start date selected in a Data Table

range › End date selected (Same week) in a Data Table

range › End date selected (Different week) in a Data Table

range › Today - In selected range in a Data Table

range › Current and adjacent month in selected range in a Data Table

.slds-has-multi-row-selection

.slds-has-multi-row-selection — Class on row to notify that more than one date will be selected with multiple weeks

.slds-is-selected-multi

.slds-is-selected-multi — Indicates if the selected days are apart of a date range