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 segment editors. Use those props when the default structure is sufficient; set aria-label directly on RuiDateRangePickerStartInput and RuiDateRangePickerEndInput when composing the children yourself.

Typing one side does not commit the range. The host value updates when both start and end are valid ISO dates, or when a previously committed range is cleared.

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>Copy

Custom markup

import '@ecopages/radiant-ui/date-range-picker';
import '@ecopages/radiant-ui/date-input';
import '@ecopages/radiant-ui/calendar';
 
<rui-date-range-picker value="2026-08-01/2026-08-14">
  <div class="rui-date-range-picker__group">
    <rui-date-input data-range-start aria-label="Start date"></rui-date-input>
    <rui-date-input data-range-end aria-label="End date"></rui-date-input>
    <button type="button" data-range-trigger data-ref="trigger"></button>
  </div>
  <div data-range-popover data-ref="popover" hidden>
    <rui-calendar data-range-calendar />
  </div>
</rui-date-range-picker>Copy

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. It is not form-associated; start-name / end-name land on the nested rui-date-input hosts. RuiField name is the store key for the combined start/end value.

Attributes

Light-DOM contract

Nested host: rui-calendar at [data-range-calendar] — parent queries [data-calendar-day] inside it.

Events

JSX view props

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

View helpers

CSS classes

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

Theme roles

Accessibility

• Give both segment groups distinct accessible names (aria-label or startLabel / endLabel on the default composition).
• Segments use spinbutton semantics with numeric keypads on touch devices.
• 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.