DatePicker
Text input with a calendar popover for date selection. Supports manual typing with automatic parsing, or click-to-pick from the calendar. Uses date-fns for formatting and parsing.
Examples
Controlled
No date selected.
US format
Min / max
Available within the next 30 days.
Sizes
Props
value
Date
Controlled selected date.
defaultValue
Date
Initial date for uncontrolled usage.
onValueChange
(date: Date | undefined) => void
Called when a date is selected or cleared.
dateFormat= 'dd/MM/yyyy'
string
date-fns format string used for display and manual input parsing.
placeholder
string
Input placeholder. Defaults to the dateFormat string in lowercase.
min
Date
Earliest selectable date.
max
Date
Latest selectable date.
size= 'md'
'sm' | 'md' | 'lg' | 'xl'
Input height and text size.
label
string
Label above the input.
hint
string
Helper text below.
error= false
boolean
Error border and hint colour.
disabled= false
boolean
Disables the input and calendar.
className
string
Additional classes on the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | — | Controlled selected date. |
| defaultValue | Date | — | Initial date for uncontrolled usage. |
| onValueChange | (date: Date | undefined) => void | — | Called when a date is selected or cleared. |
| dateFormat | string | 'dd/MM/yyyy' | date-fns format string used for display and manual input parsing. |
| placeholder | string | — | Input placeholder. Defaults to the dateFormat string in lowercase. |
| min | Date | — | Earliest selectable date. |
| max | Date | — | Latest selectable date. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Input height and text size. |
| label | string | — | Label above the input. |
| hint | string | — | Helper text below. |
| error | boolean | false | Error border and hint colour. |
| disabled | boolean | false | Disables the input and calendar. |
| className | string | — | Additional classes on the wrapper. |