DatePicker
Day, month, year: typed, not browsed.
Sat, 24 Oct 2026 · Harbour launch
Due date can’t be in the past.
In context
New task
Date of birth
We ask to confirm you’re old enough to use Athic.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
range | false | undefined | No | — |
mode | "single" | undefined | No | — |
value | Date | undefined | No | — |
defaultValue | Date | undefined | No | — |
onValueChange | ((date: Date) => void) | undefined | No | — |
minDate | Date | undefined | No | — |
maxDate | Date | undefined | No | — |
disabled | boolean | undefined | No | — |
placeholder | string | undefined | No | — |
appearance | "default" | "native" | undefined | No | — |
required | boolean | undefined | No | — |
Accessibility
A role="group" labelled "Date" holding three real NumberInputs (Day, Month, Year), each with its own label and bounds; arrow keys step a field, and the day field re-bounds itself to the month. No calendar popover to trap focus in.
data-rebar-* attributes
data-rebar-component="date-picker" on the root; parts day, month, year (each a real NumberInput with its own data-rebar-component="number-input").
Migrating to Ant Design
Not a structural match: AntD's DatePicker is a calendar popover. A migration uses that when browsing is the point, or three plain InputNumbers to keep this compact direct-entry shape.
Typed onValueChange
onValueChange is typed per mode, so an inline callback needs no annotation: (date: Date) by default, mode="single" and mode="dob", and (range: { start: Date; end: Date }) for range or mode="range". Mixing them (a range handler on a single picker) is a type error.
<DatePicker onValueChange={(d) => setDate(d)} />\n<DatePicker mode="range" onValueChange={(r) => setRange(r)} />appearance="native"
appearance="native" renders the platform date input (<input type="date">) with the same Date value API (value, defaultValue, onValueChange, minDate, maxDate), also for mode="dob". Single dates only.