Aspyn

Date Field

Typeable date input wired to the calendar.

Aspyn · Typeable date input with natural-language parsing, over the Calendar.AspynTypeable date input with natural-language parsing, over the Calendar.
SourceMarkdown

Installation

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.

Selected 8/25/2026.

Constrained dates

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

Date and time

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

Selected 8/25/2026, 3:30:00 PM.

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.