Form Inputs
Date Picker
A date picker allows a user to select a date from a popup calendar.
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 |
| isOpen | boolean | Controlled open state of the popover |
| defaultOpen | boolean | Default open state of the popover |
| onOpenChange | (open: boolean) => void | Called when the popover opens or closes |
| onChange | (date: Date | undefined) => void | Called when a date is selected. Receives undefined when the date is cleared. |
| triggerProps | ButtonHTMLAttributes | Props passed to the trigger element (buttonProps is a deprecated alias) |
| calendarProps | Partial<CalendarProps> | Props passed to the popup calendar |