# DatePicker

> A date picked from a calendar in a popover: a day, a range with quick presets, a month or a year. The trigger has the look of an Input and takes a Field's label and error. It closes on a pick, or when a range has both ends. appearance="inline" drops the frame for a toolbar.

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

## Install

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

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

## Usage

```tsx
import { DatePicker } from "@/components/entrepta/date-picker"

<Field id="when" label="date">
  <DatePicker value={day} onValueChange={setDay} max={today} />
</Field>

<DatePicker
  aria-label="period"
  mode="range"
  value={range}
  onValueChange={setRange}
  presets={[{ label: "This month", value: { start: "2026-09-01", end: "2026-09-30" } }]}
/>

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "range"` | "single" | A range closes the popover once it has both ends |
| `granularity` | `"day" \| "month" \| "year"` | "day" | The value is YYYY-MM-DD, YYYY-MM or YYYY |
| `presets` | `{ label; value: { start; end } }[]` | - | Ranges one click away, beside the calendar |
| `min / max / isDisabled` | `string / string / (day) => boolean` | - | What cannot be picked |
| `appearance` | `"field" \| "inline"` | "field" | inline drops the field's frame |