DateRangePicker

A composable date range picker that pairs two segmented date inputs — start and end — with a popover hosting a range calendar. The committed value is a { start, end } pair of YYYY-MM-DD strings, or null while the range is empty or incomplete.

Anatomy

DateRangePicker.Root owns the range value and open state. Two DateRangePicker.Input parts — one with part="start", one with part="end" — render locale-resolved segments, and DateRangePicker.Popover hosts a calendar fixed to range selection built from the same parts as the standalone Calendar.

<script>
	import { DateRangePicker } from '@human-kit/ui/daterangepicker';
</script>

<DateRangePicker.Root>
	<DateRangePicker.Input part="start" aria-label="Start date">
		{#snippet children(segment)}
			<DateRangePicker.Segment part="start" {segment} />
		{/snippet}
	</DateRangePicker.Input>
	<DateRangePicker.Input part="end" aria-label="End date">
		{#snippet children(segment)}
			<DateRangePicker.Segment part="end" {segment} />
		{/snippet}
	</DateRangePicker.Input>
	<DateRangePicker.Trigger />

	<DateRangePicker.Popover>
		<DateRangePicker.Calendar>
			<div>
				<DateRangePicker.TriggerPrevious />
				<DateRangePicker.Heading />
				<DateRangePicker.TriggerNext />
			</div>
			<DateRangePicker.Grid>
				<DateRangePicker.GridHeader />
				<DateRangePicker.GridBody />
			</DateRangePicker.Grid>
		</DateRangePicker.Calendar>
	</DateRangePicker.Popover>
</DateRangePicker.Root>

Min and max bounds

minValue and maxValue constrain both the calendar and the typed inputs. When the children snippet is omitted, DateRangePicker.Input renders its segments with default styling, as this demo shows.

Usage guidelines

• Use value with onChange for controlled state and defaultValue for uncontrolled state; the value is a { start, end } pair and the empty state is null.
• Always render one input with part="start" and one with part="end", and pass the same part to their segments.
• Use open / defaultOpen / onOpenChange to control the popover, and closeOnSelect to keep it open after the range is confirmed.
• isDateUnavailable marks specific days as non-selectable in both the inputs and the calendar.
• Set visibleMonths on DateRangePicker.Calendar to show more than one month, which makes range selection easier.
• Wrap in a LocaleProvider to localize segment order, placeholders, and calendar labels.

Accessibility

• Give each input its own accessible name (for example aria-label="Start date" and aria-label="End date").
• Segment accessible names are resolved automatically from the active locale.
• Each input exposes aria-invalid and data-invalid when its segment draft is not committable; invalid input is shown, never auto-corrected.
• Disabled calendar dates remain focusable via keyboard navigation so screen readers can discover and announce them as disabled.
• In the range calendar, the first selection starts the range, arrow keys extend the preview, and Enter or Space confirms it.

API reference

Root

The stateful container. Owns the committed { start, end } range value, the popover open state, and validation shared by both inputs and the calendar.

* required. Native HTML attributes of the underlying element are also accepted.

Input

One segmented date input for one end of the range. Render one with part="start" and one with part="end"; segments render with default styling when the children snippet is omitted.

* required. Native HTML attributes of the underlying element are also accepted.

Segment

One editable or literal segment of a range end (day, month, year, or separator). Supports typing and arrow-key stepping.

* required. Native HTML attributes of the underlying element are also accepted.

Trigger

Button that opens and closes the range calendar popover.

* required. Native HTML attributes of the underlying element are also accepted.

Popover

The floating panel that hosts the range calendar. Forwards Popover.Content props (placement, offset, shouldFlip, …); open state, trigger wiring, and id are controlled internally.

* required. Native HTML attributes of the underlying element are also accepted.

Calendar

The calendar surface inside the popover, fixed to range selection. Forwards Calendar.Root props such as visibleMonths, except those controlled by DateRangePicker.Root.

* required. Native HTML attributes of the underlying element are also accepted.

TriggerPrevious

Button that pages the calendar to the previous month (or set of visible months).

* required. Native HTML attributes of the underlying element are also accepted.

Heading

Displays the visible month heading, localized through the active locale.

TriggerNext

Button that pages the calendar to the next month (or set of visible months).

* required. Native HTML attributes of the underlying element are also accepted.

Grid

Renders one visible month as an accessible grid named after the month heading.

* required. Native HTML attributes of the underlying element are also accepted.

GridHeader

The weekday header row. Iterates the localized weekday labels and passes each to the children snippet.

* required. Native HTML attributes of the underlying element are also accepted.

HeaderCell

One weekday label cell inside the grid header row.

* required. Native HTML attributes of the underlying element are also accepted.

GridBody

The day cells area. Iterates the visible days and passes each ISO date to the children snippet.

* required. Native HTML attributes of the underlying element are also accepted.

BodyCell

One focusable day cell. The first selection starts the range, hover previews it, and the second selection confirms it.

* required. Native HTML attributes of the underlying element are also accepted.