# Date Field

> Typeable date input wired to the calendar.

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

## Install

```tsx
import { DateField } from "@aspyn-io/kit";
```

### Typeable date field

A text input wired to the Calendar. Type a date — numbers (8/25/2026), words (August 25, 2026), natural language (next friday, in 2 weeks), even a yearless date (August 25 → this year) — and the calendar and selection follow; pick a day and it fills the field; press ↓ to open the picker.

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

<Label htmlFor="date">Date</Label>
<DateField id="date" defaultValue={new Date()} onValueChange={setDate} />
// Try: "8/25/2026", "August 25", "next friday", "in 2 weeks"
```

### Constrained dates

Pass react-day-picker matcher(s) via disabled — the calendar and typed parsing both respect them.

```tsx
<DateField disabled={[{ dayOfWeek: [0, 6] }]} />   // no weekends
```

### Date and time

granularity="minute" adds a time to the value and a time input to the popover; picking a day keeps the time.

```tsx
<DateField granularity="minute" defaultValue={new Date()} onValueChange={setValue} />
```

## Notes

- DateField is Aspyn-owned, composed over the inherited Calendar — the typeable pattern packaged as one component.
- Format-preserving: DateField remembers the style you type — 8/28/2026, 8-28-2026, 2026/08/26, August 26th 2026 — and re-applies it when you pick a day, so your input formatting is never rewritten. Pass formatDate to force a single format instead.
- Uncontrolled: seed with defaultValue and read changes via onValueChange (called with the parsed/selected Date, or undefined when cleared or invalid).
- Parsing uses chrono-node, which understands numeric, worded, and natural-language dates and resolves a yearless date to the current year; pass parseDate to swap in a stricter parser or a locale-specific one.
- Pass name to submit the selected value (ISO) with a plain HTML form. Pair with Label via htmlFor/id for an accessible name.
- For a non-typeable trigger, use the Date Picker pattern (a Button + Calendar in a Popover) instead.