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.

Trip dates

mmddyyyy

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.

2026 date range

mmddyyyy

Select dates within 2026

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.

Unavailable range

mmddyyyy

<DateRangePicker
  label="Unavailable range"
  isDisabled
/>

Required Field

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

Booking dates

mmddyyyy

<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