RangeDatePicker

RangeDatePicker is a component used for users to select a range of dates.

The RangeDatePicker follows the WAI-ARIA - Combobox Pattern for accessibility.

If you are not using FormControl, set aria-label or aria-labelledby to RangeDatePicker.

<RangeDatePicker placeholder="YYYY/MM/DD" aria-label="Date to reserve" />

Copied!

<VStack gap="sm">
  <Heading as="h3" id="label">
    Date to reserve
  </Heading>

  <RangeDatePicker placeholder="YYYY/MM/DD" aria-labelledby="label" />
</VStack>

Copied!

Key	Description	State
`ArrowUp`	Moves focus one cell up.	-
`ArrowDown`	Moves focus one cell down.	-
`ArrowLeft`	Moves focus one cell left. If on first cell, focuses last cell of previous period.	-
`ArrowRight`	Moves focus one cell right. If on last cell, focuses first cell of next period.	-
`Home`	Focuses the first cell.	-
`End`	Focuses the last cell.	-
`Space`, `Enter`	Activates the focused cell.	-
`Escape`	Closes the dialog.	`closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`RangeDatePickerField` Internal	`role="combobox"`	Indicates that this is a combobox.
	`aria-haspopup="dialog"`	Indicates that a dialog exists.
	`aria-expanded`	Set to `"true"` when the dialog is open, `"false"` when closed.
	`aria-controls`	Set to the `id` of the related `ColorSelector` when open, `undefined` when closed.
	`aria-readonly`	Set to `"true"` when `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` when `isDisabled` is set.
	`aria-invalid`	Set to `"true"` when `isInvalid` is set.
	`aria-required`	Set to `"true"` when `isRequired` is set.
`DatePickerClearIcon` Internal	`role="button"`	Indicates that this is a button.
	`aria-label`	`"Clear value"` is set.
`Calendar` Internal	`role="dialog"`	Indicates that this is a dialog.
	`id`	The `id` used to associate with `RangeDatePickerField`.
	`aria-hidden`	Set to `"true"` when the dialog is open, `"false"` when closed.
`CalendarLabel` Internal	`aria-live="polite"`	Indicates that it may be updated outside of focus.
`CalendarControlPrev` Internal	`aria-label`	Sets `"Go to previous month"` if `type` is `"date"`, otherwise sets `"Go to previous year"`.
`CalendarControlNext` Internal	`aria-label`	Sets `"Go to next month"` if `type` is `"date"`, otherwise sets `"Go to next year"`.
`Month` Internal	`role="grid"`	Indicates that it is a grid.
	`aria-label`	Sets the selected month and year, like `"October 2024"`.
	`aria-multiselectable`	Indicates that multiple selection is possible.
`MonthList` Internal	`role="grid"`	Indicates that it is a grid.
	`aria-label`	Sets the selected year, like `"2024"`.
`YearList` Internal	`role="grid"`	Indicates that it is a grid.
	`aria-label`	Sets the year range, like `"From 2021 to 2032"`.
`Button` Internal	`aria-selected`	Set to `"true"` if the item is selected, `"false"` if not selected.
	`aria-disabled`	Set to `"true"` if the item is disabled.

Edit this page on GitHub

PreviousMultiDatePicker NextTimePicker