Calendar allows user to pick a date. It comes with built-in functionality that allows you to set a minimum and a maximum allowed date. Please note that the date must be passed in ISO-8601 format.
The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.
Which day is considered first day of the week?
Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.
Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
Controls whether the calendar expands to fill the width of its container.
Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.
|Dispatched when the calendar's focused date changes.|
|Dispatched when a date is selected and the value changes.|
|Programmatically move focus to the calendar.|
This section includes guidelines for designers and developers about the usage of this component in different contexts.
- Use when the user needs to choose a single date or a date range.
- Close calendar after a single date is selected, unless a range with a start and end date is required.
- Don’t use for entering date of birth. Use input component instead.
- Don’t use for choosing a date that is over 10 years in the future or the past.
Keyboard accessibility #
Calendar component is built to closely follow W3C Date Picker Dialog example with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.
Month/year buttons #
Space, Enter: Changes the month and/or year displayed.
Calendar grid #
Space, Enter: Selects a date.
Arrow up: Moves focus to the same day of the previous week.
Arrow down: Moves focus to the same day of the next week.
Arrow right: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.
Arrow left: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.
Home: Moves focus to the first day (e.g Monday) of the current week.
End: Moves focus to the last day (e.g. Sunday) of the current week.
Page Up: Changes the grid of dates to the previous month and sets focus on the same day of the same week.
Shift + Page Up: Changes the grid of dates to the previous year and sets focus on the same day of the same week.
Page Down: Changes the grid of dates to the next month and sets focus on the same day of the same week.
Shift + Page Down: Changes the grid of dates to the next year and sets focus on the same day of the same week.
Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.