# Date Range

> Source: https://design.nanatec.co.ke/components/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.

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

```html
<nana-date-range></nana-date-range>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

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

## Basic usage

```html
<nana-date-range></nana-date-range>
```

## One month

Show a single calendar with `months="1"`.

```html
<nana-date-range label="Single month" months="1" clearable></nana-date-range>
```

## Bounded with presets

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

```html
<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>
```

## Sizes & states

```html
<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>
```

## API

## 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

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-date-range--docs