# Date Picker

> Calendar in a popover for single dates and ranges.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/date-picker.json`

## Install

```tsx
import {
  Button,
  Calendar,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@aspyn-io/kit";
```

### Single date

The date-picker pattern: a Calendar inside a Popover, with a Button trigger showing the formatted value.

```tsx
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date>();

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline" className="w-60 justify-start font-normal">
      <CalendarIcon />
      {date ? format(date) : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0" align="start">
    <Calendar
      mode="single"
      selected={date}
      onSelect={(d) => { setDate(d); setOpen(false); }}
    />
  </PopoverContent>
</Popover>
```

### Date range

Swap the Calendar to mode="range" and render two months for range selection.

```tsx
const [range, setRange] = React.useState<DateRange>();

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline" className="w-80 justify-start font-normal">
      <CalendarIcon />
      {range?.from && range?.to
        ? `${format(range.from)} – ${format(range.to)}`
        : "Pick a range"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0" align="start">
    <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
  </PopoverContent>
</Popover>
```

## Notes

- Date Picker is a composition, not a separate component: Button + Popover + Calendar. Everything the Calendar supports (month/year dropdowns, disabled matchers, min/max) applies here.
- Close the popover on select for single dates; leave it open for ranges so users can pick both ends.