# Date and date range

A field that opens a calendar. Ranges add presets on the left (Today, Last 7 days, This month) and two months side by side.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Calendar, Popover
- **Build:** shadcn `Calendar` (react-day-picker) in a `Popover`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Format: "2 Oct 2026"; relative words in lists ("Yesterday").

## Do

- Offer presets for reports.

## Don't

- US date order.

## Accessibility

- **Keyboard:** Arrow keys move days; PageUp/PageDown months; Enter picks; Escape closes.
- **ARIA:** react-day-picker grid semantics; today marked with `aria-current="date"`.
- **Focus:** Focus moves into the grid on open, back to the trigger on close.

## Tokens

`--s-3` `--s-4` `--s-2` `--w-semibold` `--text-card` `--font-voice` `--w-medium` `--text-micro` `--font-ui` `--muted-foreground` `--text-body` `--r-control` `--motion-hover` `--muted` `--secondary-border` `--primary` `--primary-foreground` `--accent` `--border`

## Files

`date.html` live specimen · `date.css` kit rules · `date.d.ts` props · full page: `docs/components/date/` (phone: `m/`).