DateRangePicker

Open in Playground

Click the start, then the end (either order). The value is { start, end }.

Banana holiday

Props

labelstring
Label text.
value{ start, end }
Selected range (Dates or null).
onChange({ start, end }) => void
Called as the range is picked.
minDate
Earliest selectable date.
maxDate
Latest selectable date.
placeholderstring
Default: 'Select range'
Text when no range is chosen.
errorstring
Error message shown below the control; sets the invalid style.
localestring
Locale for formatting.
weekStartsOn0 | 1
Default: 0
First day of the week.

DateRangePicker props
Prop	Type	Default	Description
`label`	string	–	Label text.
`value`	{ start, end }	–	Selected range (Dates or null).
`onChange`	({ start, end }) => void	–	Called as the range is picked.
`min`	Date	–	Earliest selectable date.
`max`	Date	–	Latest selectable date.
`placeholder`	string	`'Select range'`	Text when no range is chosen.
`error`	string	–	Error message shown below the control; sets the invalid style.
`locale`	string	–	Locale for formatting.
`weekStartsOn`	0 \| 1	`0`	First day of the week.

Related hooks and theme:useDismissable