DatePicker

Forms · src/components/DatePicker/DatePicker.tsx

A date, typed or picked.

Typed first, and that ordering is the point. A calendar that is the only way in locks out anyone whose JavaScript failed, anyone on a screen reader, and anyone who simply knows the date and would rather write it than hunt for it. The calendar is the second route, never the only one.

The typed parser accepts the shapes people actually write - "4 Mar 2026", "Mar 4 2026", "2026. 3. 4." - and when it cannot read one it keeps the text instead of discarding it, so nobody loses what they typed to a format they were never told about.

For a date of birth use DateInput: a calendar is the wrong instrument for a year eighty years back.

Import

import { DatePicker } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
`value`	`string \| Date \| null`	`YYYY-MM-DD`, or a Date.
`defaultValue`	`string \| Date \| null`
`locale`	`string`	Defaults to the page's `lang`. Drives the month names, the weekday names and the week start.
`weekStart`	`number`	Override the locale's week start. 0 is Sunday.
`size`	`'sm' \| 'md' \| 'lg'`
`placeholder`	`string`
`disabled`	`boolean`
`defaultOpen`	`boolean`
`format`	`(d: Date) => string`	Format the value in the field. Defaults to the locale's medium date style.
`calendarLabel`	`string`
`prevLabel`	`string`
`nextLabel`	`string`
`todayLabel`	`React.ReactNode`
`clearLabel`	`React.ReactNode`
`className`	`string`
`onChange`	`(value: string \| null, date: Date \| null) => void`

Also accepts everything on FieldShellProps.