Two inputs to type a start and an end date, with a calendar of two months to pick the
range. The text is a date in the YYYY-MM-DD format, which is the same in every country.
Name the group with aria-label. In the calendar, the first click sets the start, the second sets the end and closes it.
Start with a range using initialValue, a pair of dates. Use value and onChange to control it.
onChange receives the pair [start, end]. While the range is being picked, end is null.
A date outside the limits cannot be typed, and its day is disabled in the calendar.
Use filled, light, ghost or subtle with a type to change the surface of the field.
Locks both inputs and the calendar button.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | selected range, to control the component | [Date | null, Date | null] | - | - |
| initialValue | range at the start | [Date | null, Date | null] | - | [null, null] |
| onChange | called with [start, end], with end as null while the range is picked | (range: [Date | null, 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 |
| startPlaceholder | text shown when the start input is empty | string | - | YYYY-MM-DD |
| endPlaceholder | text shown when the end input is empty | string | - | YYYY-MM-DD |
| startLabel | name of the start input | string | - | Start date |
| endLabel | name of the end input | string | - | End date |
| calendarLabel | name of the calendar button and of its dialog | string | - | Choose dates |
| disabled | disable the component | boolean | - | false |
| type | color of the field | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | default |
| rounded | round the corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| ... | native props, passed to the group div | HTMLAttributes | 'aria-label', 'id', ... | - |
Each input changes the range only for a real date inside min and max. The end cannot come before the start, so that text is not accepted. When an input loses the focus, it goes back to the last valid date. An empty text clears that edge of the range.
The ref points at the group div.
The group is named by aria-label, and each input has its own name, Start date and End date, which you can translate with startLabel and endLabel. The calendar button has aria-haspopup="dialog" and aria-expanded. The calendar opens in a dialog that shows two months side by side, with the focus on the day of the start. Escape closes it and puts the focus back on the button, and picking the end puts the focus on the end input. See Calendar for the keys.