Date Range Picker

Date range pickers collect a start and end date in one control, such as bookings, reporting periods, and availability filters.

Try it

Usage

Compose the two inputs, separator, calendar trigger, popup, and calendar as children of RuiDateRangePicker. When no children are supplied, RuiDateRangePicker renders this same composition for you. Pass value as start/end ISO dates and give each input its own accessible name.

The default composition accepts startLabel and endLabel view props for the two native inputs. Use those props when the default structure is sufficient; set aria-label directly on RuiDateRangePickerStartInput and RuiDateRangePickerEndInput when composing the children yourself.

import {
  RuiDateRangePicker,
  RuiDateRangePickerCalendar,
  RuiDateRangePickerControl,
  RuiDateRangePickerEndInput,
  RuiDateRangePickerInputs,
  RuiDateRangePickerPopover,
  RuiDateRangePickerSeparator,
  RuiDateRangePickerStartInput,
  RuiDateRangePickerToggle,
} from '@ecopages/radiant-ui/date-range-picker';
import { RuiField } from '@ecopages/radiant-ui/field';
import { RuiLabel } from '@ecopages/radiant-ui/label';
 
<RuiField name="tripDates">
  <RuiLabel>Trip dates</RuiLabel>
  <RuiDateRangePicker value="2026-08-01/2026-08-14" visibleMonths={2}>
    <RuiDateRangePickerControl>
      <RuiDateRangePickerInputs>
        <RuiDateRangePickerStartInput aria-label="Start date" />
        <RuiDateRangePickerSeparator />
        <RuiDateRangePickerEndInput aria-label="End date" />
      </RuiDateRangePickerInputs>
      <RuiDateRangePickerToggle />
    </RuiDateRangePickerControl>
    <RuiDateRangePickerPopover>
      <RuiDateRangePickerCalendar />
    </RuiDateRangePickerPopover>
  </RuiDateRangePicker>
</RuiField>

Calendar input

Use the calendar button to select the start and end dates. After the first date is selected, the popup stays open for the second date and closes when the range is complete. Focus moves to the selected start date or the first available date when the popup opens.

Two-month view

Set visibleMonths to 2 so users can span month boundaries without extra navigation clicks.

Separate form names

Use startName and endName when the backend expects discrete fields instead of a combined range value.

Theming

Date Range Picker surfaces map to semantic surface roles, never Tailwind palette steps:

Geometry shares control tokens (--size-control-*, --radius-control, --space-control-*) with RuiInput and RuiButton so form rows align. Override at the theme layer, not in component CSS.

API

RuiDateRangePicker is a custom element (<rui-date-range-picker>) that coordinates its light-DOM inputs, toggle button, and range calendar popover.

Attributes

Events

JSX view props

These props configure the default child composition rendered by the RuiDateRangePicker JSX view. They are not custom-element attributes.

Composition helpers

Pass these helpers as RuiDateRangePicker children when the default structure is not enough:

CSS classes

Public BEM classes on the composed light-DOM surface (documented via @cssclass on RuiDateRangePicker):

Theme roles

Accessibility

• Give both native inputs distinct accessible names; placeholders alone are not sufficient. The example uses aria-label on each input.
• The calendar trigger opens the popup and moves focus to the selected start date or first available date; arrow keys move between days, Page Up / Page Down change months, and Escape closes the popup.
• Surface validation errors for incomplete ranges before form submission.