DatePicker
An input to type a date, with a calendar to pick it. The text is a date in the YYYY-MM-DD format, which is the same in every country.
General
Name the field with aria-label, or with a visible label.
Initial value
Start with a date using initialValue. Use value and onChange to control it.
Min and max
A date outside the range cannot be typed, and its day is disabled in the calendar.
Disabled
Disable the input and the calendar button.
APIs
DatePicker.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | selected date, to control the component | Date / null | - | - |
| initialValue | date at the start | Date / null | - | null |
| onChange | called with the date, or null when the text is emptied | (date: Date | null) => void | - | - |
| min | first date that can be picked | Date | - | - |
| max | last date that can be picked | Date | - | - |
| locale | language of the calendar | string | any Intl locale | en-US |
| weekStartsOn | first day of the week in the calendar, 0 is Sunday | number | 0 to 6 | 0 |
| placeholder | text shown when the input is empty | string | - | YYYY-MM-DD |
| calendarLabel | name of the calendar button and of its dialog | string | - | Choose date |
| disabled | disable the component | boolean | - | false |
| ... | native props, passed to the input | InputHTMLAttributes | 'aria-label', 'name', ... | - |
Typing
The value changes only for a real date inside min and max. 2026-02-31 is not accepted. When the input loses the focus, it goes back to the last valid date. An empty text clears the value.
Ref
The ref points at the input.
Accessibility
The calendar button has aria-haspopup="dialog" and aria-expanded. The calendar opens in a dialog with the focus on the day of the current value. Escape closes it and puts the focus back on the button, and picking a day puts the focus on the input. See Calendar for the keys.