# DateNavigator

> Previous, the period, next and today, to walk through days, months or years. The period opens a DatePicker. At a limit the arrow stays focusable, and its Tooltip says why it goes no further. Put the value in the URL so a link and the back button work.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/date-navigator

## Install

```bash
npx @entrepta/cli@latest add date-navigator
```

Files: `primitives/date-navigator.tsx`, `lib/format.ts`, `hooks/use-format.ts`, `primitives/calendar.tsx`, `lib/overlay.ts`, `primitives/popover.tsx`, `primitives/kbd.tsx`, `primitives/input.tsx`, `primitives/date-picker.tsx`, `primitives/button.tsx`, `primitives/button-variants.ts`, `primitives/tooltip.tsx`.
npm packages: `react-day-picker`, `@phosphor-icons/react`, `@radix-ui/react-popover`, `class-variance-authority`, `@radix-ui/react-slot`, `@radix-ui/react-tooltip`.
Comes with: `format-lib`, `use-format`, `calendar`, `overlay-lib`, `popover`, `kbd`, `input`, `date-picker`, `button`, `tooltip`.

## Usage

```tsx
import { DateNavigator } from "@/components/entrepta/date-navigator"

const [day, setDay] = useUrlFilter(...)   // or any state

<DateNavigator
  aria-label="day"
  value={day}
  onValueChange={setDay}
  min={firstDay}
  max={today}
/>

<DateNavigator aria-label="month" granularity="month" value="2026-09" onValueChange={setMonth} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / onValueChange` | `string` | - | YYYY-MM-DD, YYYY-MM or YYYY, by granularity |
| `granularity` | `"day" \| "month" \| "year"` | "day" | What one step moves |
| `min / max` | `string` | - | The first and last days there is anything to show |
| `labels` | `{ previous?, next?, today?, atStart?, atEnd? }` | - | The words, for another language. atStart and atEnd say why a step is not possible |