DateRangePicker

A date range picker lets users select a start and end date using a combined input with a range calendar popup. It is ideal for filtering by date ranges, booking stays, or defining time spans.

Import

import { DateRangePicker } from '@proyecto-viviana/solid-spectrum';
import {
  CalendarDateClass as CalendarDate,
  type DateValue,
  type RangeValue,
} from '@proyecto-viviana/solid-stately';

Basic Range Selection

Select a start and end date. The picker displays two date fields separated by a dash, and opens a range calendar popup when the button is clicked.

Selected range: None

const [range, setRange] = createSignal<RangeValue<DateValue> | null>(null);

<DateRangePicker
  label="Trip dates"
  value={range()}
  onChange={setRange}
/>

<p>Selected: {formatRange(range())}</p>

With Min/Max Constraints

Restrict the selectable range to stay within defined bounds. Dates outside the allowed range are disabled in the calendar popup.

const minDate = new CalendarDate(2026, 1, 1);
const maxDate = new CalendarDate(2026, 12, 31);

<DateRangePicker
  label="2026 date range"
  minValue={minDate}
  maxValue={maxDate}
  description="Select dates within 2026"
/>

Disabled State

A disabled date range picker cannot be interacted with.

<DateRangePicker
  label="Unavailable range"
  isDisabled
/>

Required Field

Mark the date range picker as required for form validation. An asterisk appears next to the label.

<DateRangePicker
  label="Booking dates"
  isRequired
/>

Props

Prop	Type	Default	Description
`label`	string	—	Label text displayed above the input fields
`value`	RangeValue<DateValue> \| null	—	The currently selected date range (controlled)
`onChange`	(range: RangeValue<DateValue> \| null) => void	—	Handler called when the selected range changes
`isDisabled`	boolean	`false`	Whether the date range picker is disabled
`minValue`	DateValue	—	The minimum selectable date for the range
`maxValue`	DateValue	—	The maximum selectable date for the range
`isRequired`	boolean	`false`	Whether a date range selection is required
`description`	string	—	Help text displayed below the input
`errorMessage`	string	—	Error message displayed when the field is invalid
`size`	'sm' \| 'md' \| 'lg'	`'md'`	The visual size of the date range picker

Accessibility

Start and end date fields are grouped with a group role
Each date display is labelled with aria-label for screen readers
The calendar popup uses a range selection mode with aria-selected on range cells
Range endpoints are visually and programmatically distinct (start and end)
Calendar popup traps focus and can be dismissed with Escape
Required state is communicated through aria-required