Form Inputs
Date Picker
A date picker allows a user to select a date from a popup calendar.
Default value#
Format options#
Dates are formatted with Intl.DateTimeFormat using the locale and formatOptions props.
Disabled#
Controlled#
Component props#
| Name | Type | Description |
|---|---|---|
| label | string | Label text displayed above the picker |
| value | Date | Controlled date value |
| defaultValue | Date | Default date value |
| minValue | Date | Minimum selectable date |
| maxValue | Date | Maximum selectable date |
| placeholder | string | Text shown when no date is selected (default: "Select date") |
| locale | string | Locale used to format the displayed date |
| formatOptions | Intl.DateTimeFormatOptions | Date format options (default: { dateStyle: "medium" }) |
| isDisabled | boolean | Disables the picker |
| isReadOnly | boolean | Prevents changing the value |
| onChange | (date: Date) => void | Called when a date is selected |
| buttonProps | ButtonProps | Props passed to the trigger button |
| calendarProps | Partial<CalendarProps> | Props passed to the popup calendar |