sbb-calendar component displays a calendar that allows the user to select a date. For accessibility purposes it's rendered as a native table element and each day is a button.
While being deeply linked to the implementation of the
sbb-datepicker-toggle component, it can be used on its own.
For date inputs (
selected-date) the accepted formats are:
- Date objects
- ISO String
- Unix Timestamp (number of seconds since 1 Jan 1970)
and it's recommended to set the time to 00:00:00.
The component displays one month by default; two months can be displayed setting the
wide property to
true. It's also
possible to filter out unwanted date using the
dateFilter function property.
Consumers can listen to the
dateSelected event on the
sbb-calendar component to intercept the selected date
which can be read from
Note that using the
dateFilter function as a replacement for the
max properties will most likely result in a significant loss of performance.
Keyboard navigation summary:
- Left arrow: go to previous day
- Right arrow: go to next day
- Up arrow: go to the same day in the previous week
- Down arrow: go to the same day in the next week
- Home: go to the first day of the month
- End: go to the last day of the month
- Page Up: go to the top of the column of the currently selected day
- Page Down: go to the bottom of the column of the currently selected day
Calendar with selected date and bounds:
To specify a specific date for the current datetime, you can use the
data-now attribute (timestamp in milliseconds).
This is helpful if you need a specific state of the component.
| ||--||A function used to filter out dates.|| || |
| || ||The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).|| || |
| || ||The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).|| || |
| || ||The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).|| || |
| || ||If set to true, two months are displayed|| || |
| ||Event emitted on date selection.|| |
resetPosition() => Promise<void>
Resets the active month according to the new state of the calendar.
sbb-calendar --> sbb-button
sbb-button --> sbb-icon
sbb-datepicker-toggle --> sbb-calendar
style sbb-calendar fill:#f9f,stroke:#333,stroke-width:4px