Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Calendar draft

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.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<nord-calendar></nord-calendar>

Properties

PropertyAttributeDescriptionTypeDefault
localizationCalendarLocalizedTextlocalization
valuevalueThe selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.string""
firstDayOfWeekfirstDayOfWeekWhich day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.DaysOfWeekundefined
minminMinimum 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.string""
maxmaxMaximum 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.string""
isDateDisabledControls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.DateDisabledPredicateundefined

Methods

focus(options?: FocusOptions & { target: "day" | "month" }) => void

options

Usage

This section will in the future include guidelines for designers and developers about the usage of this component in different contexts.

Integration

For integration guidelines, please see Using Components. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

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.