Date Picker Ready

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.

Open in new window

View RTL

<nord-date-picker label="Label" value="2021-01-13"></nord-date-picker>

<nord-date-picker label="Label" first-day-of-week="0"></nord-date-picker>

<nord-date-picker label="US date format" value="2021-01-01"></nord-date-picker>

<script>
  const picker = document.querySelector("nord-date-picker")
  const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT_US)
      return matches ? createDate(matches[3], matches[1], matches[2]) : undefined
    },
    format(date) {
      return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
    },
  }
</script>

<nord-date-picker label="Label" value="2021-01-01" disabled></nord-date-picker>

<nord-date-picker label="Weekends disallowed"></nord-date-picker>

<script>
  const picker = document.querySelector("nord-date-picker")
  picker.isDateDisabled = function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }
</script>

<nord-date-picker label="Label" expand></nord-date-picker>

<nord-date-picker label="Date" placeholder="Type date here" expand hide-label></nord-date-picker>

<nord-date-picker label="Label" value="2021-02-01" min="2021-01-15" max="2021-03-15"></nord-date-picker>

<nord-date-picker label="Label"></nord-date-picker>

<script>
  customElements.whenDefined("nord-date-picker").then(() => {
    const picker = document.querySelector("nord-date-picker")
    picker.show()
  })
</script>

<nord-date-picker label="Label" expand>
  <div slot="hint">
    Hint is an accessible way to provide <strong>additional information</strong> that might help the user
  </div>
</nord-date-picker>

<nord-date-picker>
  <div slot="label">Label <span style="color: var(--n-color-status-success)">with color</span></div>
</nord-date-picker>

<nord-date-picker
  label="Label"
  hint="Hint is an accessible way to provide additional information that might help the user"
  expand
></nord-date-picker>

<nord-date-picker label="Date" placeholder="e.g. 2020-01-01"></nord-date-picker>

<nord-date-picker label="Date of birth" error="This field is required"></nord-date-picker>

Properties

Property	Attribute	Description	Type	Default
`value`	`value`	Date value. Must be in IS0-8601 format: YYYY-MM-DD.	`string`	`""`
`valueAsDate`	–	Get/set the value of the picker as a Date object.	`Date \| undefined`	`undefined`
`valueAsNumber`	–	Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.	`number`	`undefined`
`min`	`min`	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.	`string`	`""`
`max`	`max`	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.	`string`	`""`
`direction`	`direction`	Forces 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"`
`firstDayOfWeek`	`first-day-of-week`	Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.	`DaysOfWeek`	`undefined`
`dateAdapter`	–	Date 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.	`DateAdapter`	`isoAdapter`
`isDateDisabled`	–	Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.	`DateDisabledPredicate`	`isDateDisabled`
`label`	`label`	Label for the input.	`string`	`""`
`hint`	`hint`	Optional hint text to be displayed with the input. Alternatively use the hint slot.	`string \| undefined`	`undefined`
`hideLabel`	`hide-label`	Visually hide the label, but still show it to assistive technologies like screen readers.	`boolean`	`false`
`placeholder`	`placeholder`	Placeholder text to display within the input.	`string \| undefined`	`undefined`
`error`	`error`	Optional error to be shown with the input. Alternatively use the error slot.	`string \| undefined`	`undefined`
`required`	`required`	Determines 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.	`boolean`	`false`
`expand`	`expand`	Controls whether the input expands to fill the width of its container.	`boolean`	`false`
`disabled`	`disabled`	Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the form component.	`string \| undefined`	`undefined`

Events

Event	Description	Type
`open`	Dispatched when the calendar is toggled open.	`NordEvent`
`close`	Dispatched when the calendar is closed.	`NordEvent`
`change`	Fired whenever the input's value is changed via user interaction.	`NordEvent`
`input`	Fired as the user types into the input.	`NordEvent`

Methods

Method name	Parameters	Description
`show() => void`	N/A	Show the calendar modal, moving focus to the calendar inside.
`hide(moveFocusToButton: boolean) => void`	`moveFocusToButton`: controls whether focus should be returned to the date picker's button.	Hide the calendar modal.
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

Usage #

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

Do #

Use when the user needs to choose a single date or a date range.

Don’t #

Don’t use for entering date of birth. Use input component instead.
Don’t use to choose a date that is over 10 years in the future or the past.

Keyboard accessibility #

Date picker is built to closely follow W3C Date Picker Dialog example with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.

Choose date button #

Space, Enter: Opens the date picker dialog and moves focus to the first select menu in the dialog.

Date picker dialog #

Esc: Closes the date picker dialog and moves focus back to the “choose date” button.
Tab: Moves focus to the next element in the dialog. Please note since the calendar uses role="grid", only one button in the calendar grid is in the tab sequence. Additionally, if focus is on the last focusable element, focus is next moved back to the first focusable element inside the date picker dialog.
Shift + Tab: Same as above, but in reverse order.

Date picker dialog: Month/year buttons #

Space, Enter: Changes the month and/or year displayed.

Date picker dialog: Date grid #

Space, Enter: Selects a date, closes the dialog, and moves focus back to the “Choose Date” button. Additionally updates the value of the date picker input with the selected date, and adds selected date to “Choose Date” button label.
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.

Date picker dialog: Close button #

Space, Enter: Closes the dialog, moves focus to “choose date” button, but does not update the date in input.

Integration

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

Integration Guidelines

Localization

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.

Localization 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.