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.
Show code Copy < nana-date-range ></ nana-date-range >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/date-range " ;
< nana-date-range ></ nana-date-range >
Show a single calendar with months="1".
Show code Copy < nana-date-range label = "Single month" months = "1" clearable ></ nana-date-range >
Constrain selectable dates with min / max, and offer quick ranges with
presets.
Show code Copy < nana-date-range label = "Open financial year" min = "2026-01-01" max = "2026-12-31" start = "2026-03-01" end = "2026-03-31" presets ></ nana-date-range >
Show code Copy < nana-date-range label = "Small" size = "sm" start = "2026-02-01" end = "2026-02-14" ></ nana-date-range > < nana-date-range label = "Large" size = "lg" start = "2026-02-01" end = "2026-02-14" ></ nana-date-range > < nana-date-range label = "Disabled" disabled start = "2026-02-01" end = "2026-02-14" ></ nana-date-range >
Property Type Default Description startstring''Range start, yyyy-mm-dd. endstring''Range end, yyyy-mm-dd. valuestring—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. namestring''— disabledbooleanfalse— requiredbooleanfalse— minstring''Earliest selectable day, yyyy-mm-dd. maxstring''Latest selectable day, yyyy-mm-dd. labelstring''Field label rendered above the trigger. helperTextstring''Assistive text below the trigger. errorTextstring''Replaces the helper text and marks the field invalid. invalidbooleanfalse— size'sm' | 'md' | 'lg''md'— placement'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right''bottom-start'Where the panel sits relative to the trigger. openbooleanfalseWhether the panel is open. monthsnumber2Number of month grids shown side by side. presetsbooleanfalseShow the shortcut list (Today, Last 7 days, This month, …). clearablebooleanfalseOffer a control to clear the range. locale——BCP 47 tag for month/weekday names and the trigger’s date formatting. firstDayOfWeeknumber1Which weekday starts the week; 0 = Sunday.
Event Type Description nana-changeCustomEventThe range changed; detail: { value }. Fires only on a complete range. nana-range-changeCustomEventThe range changed; detail: { value, start, end } nana-focusCustomEventThe trigger gained focus nana-blurCustomEventThe trigger lost focus
Slot Description triggerReplaces the built-in trigger button entirely. empty-labelShown on the trigger when no range is selected.
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
Part Description baseThe root element triggerThe trigger button panelThe popover panel presetsThe preset shortcut list calendarA single month grid dayA day cell
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Date Range interactively Every state, prop, and edge case — with live controls — in Storybook.
