Filter Date Range Component

Usage

Filter Date Range is a complete date-range filter: a chip trigger that opens a popout containing the inline Date Range Picker — built-in presets, a two-month calendar (one month on narrow screens) and an Apply action. It is the date-range counterpart to Filter Dropdown and renders the shared filter chip via Filter Field.

import "@nordhealth/components/lib/FilterDateRange"

It works inside a Filter Bar alongside the other filters. The committed value is an ISO-8601 interval string YYYY-MM-DD/YYYY-MM-DD; the chip shows the formatted range ("Created is 2 Jun 2024 – 16 Jun 2024") for you. Listen for change and own the active-filter/URL state in your app.

Examples

Basic

Inactive, the chip is dashed and shows just the label. Set value (or apply a range in the popout) and it shows the formatted range, highlighted.

Removable

Add removable so the trailing affordance removes the whole filter (firing remove) instead of clearing it. Remove the filter from the bar in the handler.

Calendar only

Add hide-presets to drop the preset list and show only the calendar.

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.

Sizes

The size attribute accepts s (default), m and l, matching the other filter controls.

Disabled

Set disabled to prevent interaction.

Accessibility

The chip trigger is a button associated with its popout via aria-controls, aria-haspopup and aria-expanded. The icon-only clear and remove buttons expose their purpose to assistive technology via visually-hidden labels.
The popout is a date-range picker dialog: the calendar is keyboard navigable and the presets and Apply action are reachable and labelled.
The control emits intent only (change, clear, remove) — keep the active-filter state your app maintains reflected on the chip so the current selection is announced.

API reference

FilterDateRange

Filter Date Range is a self-contained date-range **filter**: a chip that opens a popout containing an inline Date Range Picker (presets + two-month calendar + Apply). It is the date-range counterpart to Filter Dropdown and renders the shared filter chip via Filter Field. Composition-first: it emits change/clear/remove and leaves the active filters and any URL/query state to your app.

<nord-filter-date-range></nord-filter-date-range>

Props

Property	Attribute	Description	Type	Default
`label`	`label`	The label naming what this filter targets, shown on the chip.	`string`	`''`
`value`	`value`	The committed range as an ISO-8601 interval string `YYYY-MM-DD/YYYY-MM-DD`, or `""` for no selection.	`string`	`''`
`min`	`min`	Earliest selectable date (ISO-8601).	`string \| undefined`	—
`max`	`max`	Latest selectable date (ISO-8601).	`string \| undefined`	—
`hidePresets`	`hide-presets`	Hides the built-in preset list, leaving only the calendar.	`boolean`	`false`
`firstDayOfWeek`	`first-day-of-week`	First day of the week (0 = Sunday … 6 = Saturday).	`number \| undefined`	—
`today`	`today`	Overrides "today" (ISO-8601), mainly for deterministic tests/demos.	`string \| undefined`	—
`removable`	`removable`	Whether the whole filter can be removed. When `true` the trailing affordance is a remove button that fires `remove`; otherwise it is a clear button.	`boolean`	`false`
`clearable`	`clearable`	Shows a clear (✕) button while there is a selection. Defaults to `true`.	`boolean`	`true`
`disabled`	`disabled`	Makes the component disabled.	`boolean`	`false`
`size`	`size`	The size of the chip controls.	`'s' \| 'm' \| 'l'`	`'s'`
`name`	`name`	Identifies the filter (e.g. for your app's active-filter state).	`string`	`''`
`open`	`open`	Whether the popout is open.	`boolean`	`false`

Methods

Method name	Parameters	Description
`show() => void`	N/A	Open the popout.
`hide() => void`	N/A	Close the popout.

Event	Detail Type	Description
`change`	`FilterDateRangeChangeEvent`	Dispatched when the committed range changes (Apply or clear).
`clear`	`FilterDateRangeClearEvent`	Dispatched when the chip's clear affordance is pressed.
`remove`	`FilterDateRangeRemoveEvent`	Dispatched when the chip's remove affordance is pressed.
`open`	`NordEvent`	Dispatched when the popout is opened.
`close`	`NordEvent`	Dispatched when the popout is closed.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-filter-date-range-popout-inline-size`	Controls the inline size of the popout content.	—

Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.

Dependencies

This component is internally dependent on the following components:

Filter Date Range Light DOM & Tailwind