DateRangePicker New Alpha Light DOM & Tailwind

Usage

Date Range Picker lets people choose a start and end date as a single range. They can pick a built-in preset (Today, Last 7 days, This month, …) or drag out a range across the calendar, which shows two months side by side on wider screens and a single month on narrow ones. Reach for it for reporting periods, filters and any "from–to" date input.

The date range 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/DateRangePicker"
import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldDescription"
import "@nordhealth/components/lib/FieldError"

The committed value is an ISO-8601 interval string YYYY-MM-DD/YYYY-MM-DD. The convenience start-date / end-date properties and the valueAsDateRange getter/setter stay in sync with it.

Selecting in the popout builds a pending range. Apply commits it (firing a change event), Cancel reverts to the last committed value, and Clear empties the selection.

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

Presets

A built-in list of presets is shown by default. Add hide-presets to suppress it and show only the calendar.

Error

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

Required

Mark a field as required by setting required on the Field Label.

Two-field form submission

By default the picker submits the interval string under its name. Set both start-name and end-name to instead submit the start and end as two separate form fields.

Min and max

Constrain the selectable dates with min and max (both ISO YYYY-MM-DD). Dates outside the range are disallowed in the calendar, and a committed range that falls outside the bounds sets a validation error.

Inline

Set inline to render the presets, calendar and actions directly on the page, with no trigger button or popout. Useful when the picker lives in a form rather than behind a trigger.

Custom trigger

Provide your own trigger element with slot="trigger" and it replaces the built-in button while keeping all the popout behaviour. This is how you compose the picker into a Filter Bar — drop a filter chip in as the trigger. The picker wires aria-haspopup, aria-controls and aria-expanded onto whatever you provide.

Disabled

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

Invalid

Mark the Field invalid and pair it with a Field Error to convey a validation problem.

Sizes

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

RTL

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

Accessibility

• Give the date range picker an accessible name with its built-in label, or — inside a Field — a Field Label connected via for.
• Convey validation with a Field Error rather than colour alone — it is associated with the control and announced to assistive technology.
• Mark required fields by setting required on the Field Label; it shows the indicator and marks the control required.
• The trigger is a button that opens a dialog popout; it exposes aria-haspopup, aria-expanded and aria-controls so assistive tech announces its state.
• The range calendar is fully keyboard navigable: move with the arrow keys, jump months with Page Up / Page Down, and pick the start and end with Enter or Space.
• The preset list, calendar and Apply / Cancel / Clear actions are all reachable and labelled, and every label is localizable.