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

Date Picker draft

Date Picker allows user to enter a date either through text input, or by choosing a date from the calendar. Please note that the date must be passed in ISO-8601 format: YYYY-MM-DD.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<nord-date-picker label="Label" value="2021-01-13"></nord-date-picker>

Properties

PropertyAttributeDescriptionTypeDefault
valuevalueDate value. Must be in IS0-8601 format: YYYY-MM-DDstring""
valueAsDateGet/set the value of the picker as a Date object.Date | undefinedundefined
valueAsNumberGet/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.numberundefined
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""
directiondirectionForces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right."left" | "right""right"
firstDayOfWeekfirst-day-of-weekWhich day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.DaysOfWeekundefined
localizationButton labels, day names, month names, etc, used for localization. Default is English.DatePickerLocalizedTextlocalization
dateAdapterDate adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting.DateAdapterisoAdapter
isDateDisabledControls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.DateDisabledPredicateundefined
labellabelLabel for the input.string""
hinthintOptional hint text to be displayed with the input. Alternatively use the hint slot.string | undefinedundefined
hideLabelhide-labelVisually hide the label, but still show it to assistive technologies like screen readers.booleanfalse
placeholderplaceholderPlaceholder text to display within the input.string | undefinedundefined
errorerrorOptional error to be shown with the input. Alternatively use the error slot.string | undefinedundefined
requiredrequiredDetermines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.booleanfalse
expandexpandControls whether the input expands to fill the width of its container.booleanfalse
disableddisabledMakes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.booleanfalse
namenameThe name of the input component.string | undefinedundefined

Events

EventDescriptionType
openDispatched when the calendar is toggled open.NordEvent
closeDispatched when the calendar is closed.NordEvent
changeFired whenever the input's value is changed via user interaction.NordEvent
inputFired as the user types into the input.NordEvent

Methods

show() => void

Show the calendar modal, moving focus to the calendar inside.

hide(moveFocusToButton: ) => void

Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus returning to the date picker's button. Default is true.

moveFocusToButton

focus(options?: FocusOptions) => void

Programmatically move focus to the component

options
An object which controls aspects of the focusing process.

blur() => void

Programmatically remove focus from the component.

click() => void

Programmatically simulates a click on the component.


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.