Forms

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.

view .md

Preview

2026-09-27 · 2026-09 · the day stops at Sep 1 and Sep 30

Installation

terminal

bash

npx @entrepta/cli@latest add date-navigator

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

date-navigator.tsx

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