Date picker
InputsText input plus grid calendar. Values are ISO yyyy-mm-dd strings over the wire; the grid implements the ARIA grid pattern with roving tabIndex and full arrow/PageUp/Home navigation.
import { DatePicker } from "@componentforge/react";
Examples
Weekends disabled
Disabled days are skipped by keyboard navigation but remain reachable — selection just rejects them.
value: (null)Accessibility
- Calendar is role="grid": rows/cells with aria-selected on the selected cell and aria-current="date" on today.
- Month heading is aria-live="polite" so month jumps are announced.
- Disabled days keep focus traversal intact (aria-disabled, not disabled) and reject selection.
- Typed input validates strictly (2026-02-31 is rejected) and sets aria-invalid.
Keyboard interactions
| Key | Action |
|---|---|
| ← / → / ↑ / ↓ | Move focused day by 1 / 7 (skips disabled). |
| PageUp / PageDown | Previous / next month (Shift = year). |
| Home / End | First / last day of week. |
| Enter / Space | Select focused day. |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | null (yyyy-mm-dd) | null | ISO date string contract. |
| min / max | string | — | Inclusive ISO bounds. |
| isDateDisabled | (date: Date) => boolean | — | Custom predicate (weekends, booked days…). |
| locale | string | "en-US" | Intl formatting for month/weekday labels. |