Date Range

A date-range picker: a trigger showing the current range, and a popover with one or two month grids plus optional shortcut presets. The form value is the two ISO dates joined by a slash (2026-01-01/2026-01-31), which is what start/end serialise to. An incomplete range submits nothing.

Preview

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/date-range";

Basic usage

<nana-date-range></nana-date-range>

One month

Show a single calendar with months="1".

Show code Copy

Bounded with presets

Constrain selectable dates with min / max, and offer quick ranges with presets.

Show code Copy

Sizes & states

Show code Copy

API

Properties

Property	Attribute	Type	Default	Description
clearable	—	boolean	false	Offer a control to clear the range.
disabled	—	boolean	false
end	—	string	''	Range end, `yyyy-mm-dd`.
errorText	error-text	string	''	Replaces the helper text and marks the field invalid.
firstDayOfWeek	first-day-of-week	number	1	Which weekday starts the week; 0 = Sunday.
helperText	helper-text	string	''	Assistive text below the trigger.
invalid	—	boolean	false
label	—	string	''	Field label rendered above the trigger.
locale	—	—	—	BCP 47 tag for month/weekday names and the trigger's date formatting.
max	—	string	''	Latest selectable day, `yyyy-mm-dd`.
min	—	string	''	Earliest selectable day, `yyyy-mm-dd`.
months	—	number	2	Number of month grids shown side by side.
name	—	string	''
open	—	boolean	false	Whether the panel is open.
placement	—	PopupPlacement	'bottom-start'	Where the panel sits relative to the trigger.
presets	—	boolean	false	Show the shortcut list (Today, Last 7 days, This month, …).
required	—	boolean	false
size	—	DateRangeSize	'md'
start	—	string	''	Range start, `yyyy-mm-dd`.
value	—	string	—	The submitted form value: `start/end`. Setting it parses both ends back out. Empty while the range is incomplete, so a half-picked range submits nothing.

Events

Event	Description
nana-change	The range changed; detail: { value }. Fires only on a complete range.
nana-range-change	The range changed; detail: { value, start, end }
nana-focus	The trigger gained focus
nana-blur	The trigger lost focus

Slots

Slot	Description
trigger	Replaces the built-in trigger button entirely.
empty-label	Shown on the trigger when no range is selected.

CSS parts

Part	Description
::part(base)	The root element
::part(trigger)	The trigger button
::part(panel)	The popover panel
::part(presets)	The preset shortcut list
::part(calendar)	A single month grid
::part(day)	A day cell

CSS custom properties

Property	Description
--nana-date-range-bg	Panel background
--nana-date-range-radius	Panel corner radius
--nana-date-range-accent	Selection colour
--nana-date-range-in-range-bg	Fill between the two endpoints

Events

Event	Type	Description
nana-change	CustomEvent	The range changed; detail: { value }. Fires only on a complete range.
nana-range-change	CustomEvent	The range changed; detail: { value, start, end }
nana-focus	CustomEvent	The trigger gained focus
nana-blur	CustomEvent	The trigger lost focus

Slots

Slot	Description
trigger	Replaces the built-in trigger button entirely.
empty-label	Shown on the trigger when no range is selected.

CSS Variables

Variable	Default	Description
--nana-date-range-bg	—	Panel background
--nana-date-range-radius	—	Panel corner radius
--nana-date-range-accent	—	Selection colour
--nana-date-range-in-range-bg	—	Fill between the two endpoints

CSS Parts

Part	Description
base	The root element
trigger	The trigger button
panel	The popover panel
presets	The preset shortcut list
calendar	A single month grid
day	A day cell

Accessibility

• Keyboard accessible
• Screen-reader labels
• Focus-visible states
• ARIA roles and states
• WCAG 2.2 AA contrast

Related components

• Button
• Button Group
• Icon Button
• Input
• Textarea

Storybook

Explore Date Range interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook