DatePicker Updated

Usage

Date Picker lets people enter a date either by typing it into the text input or by choosing it from a Calendar that opens in a popout. Values are always handled in ISO-8601 format (YYYY-MM-DD), regardless of how the date is displayed.

The date picker renders its built-in label, hint and error on its own. Wrapped in a Field, the Field takes over with a Field Label, Field Description and Field Error, and the built-in versions step aside automatically.

import "@nordhealth/components/lib/DatePicker"
import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldDescription"

Standalone or inside a Field

Use the control on its own with its built-in label, hint and error, or wrap it in a Field — the Field then provides the labelling. Both render the same control:

Examples

Placeholder

Use placeholder to hint at the expected format before a date is entered.

Minimum and maximum

Constrain the selectable range with min and max. Both take ISO-8601 dates and can be used together or on their own.

Sizes

The size attribute accepts s, m (default) and l.

Expanded

Set expand to make the date picker fill the inline size of its container.

Change the first day of the week

Set first-day-of-week to control which weekday the calendar starts on (0 for Sunday, 1 for Monday, and so on).

Change today

Override which date is treated as "today" with the today attribute, useful for testing or when the client clock can't be trusted.

Customizing the date format

Supply a parser and formatter to read and display dates in a non-ISO format (for example US MM/DD/YYYY), while the underlying value stays ISO-8601.

Disabling days

Set the isDateDisabled property to a function that returns true for dates that can't be selected — here weekends are disallowed.

Highlighting days

Set the isDateHighlighted property to mark notable dates in the calendar; return a string to give the highlight an accessible label.

Opening programmatically

Call the show() method to open the calendar popout from your own code.

Validation

Date Picker participates in form validation. Out-of-range or malformed values set a validation message that surfaces through the surrounding Field.

Error

Show validation with a Field Error and mark the Field invalid.

Disabled

Add disabled to prevent interaction while still showing the committed value.

Required and readonly

Mark required fields by setting required on the Field Label, or set readonly on the date picker to show a value that can't be edited.

RTL

Date Picker follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

• Always give the date picker an accessible name with a Field Label connected via for.
• Convey validation with a Field Error rather than colour alone — it is associated with the date picker and announced to assistive technology.
• Mark required fields by setting required on the Field Label; it shows the indicator and marks the control required.
• Dates must be supplied and read in ISO-8601 format (YYYY-MM-DD); the display format shown to the user is handled separately from the underlying value.
• When a date falls outside min or max, the Date Picker sets a validation error so the out-of-range state is announced to screen reader users.
• The toggle button that opens the calendar has an accessible label, and the selected date is appended to it so users know the current selection.