DateRangePicker

A date range field with a calendar popover for visual range selection. Combines segmented range input with a dropdown range calendar.

Example

Select range

04032026

–

04102026

Range: 2026-04-03 to 2026-04-10

Root Props

Prop	Type	Default	Description
`value`	`{ start: DateValue; end: DateValue }`	—	Selected date range, bindable
`onValueChange`	`(value) => void`	—	Called when range changes
`placeholder`	`DateValue`	—	Placeholder date, bindable
`open`	`boolean`	`false`	Controls popover state, bindable
`onOpenChange`	`(open: boolean) => void`	—	Called when popover toggles
`minValue`	`DateValue`	—	Minimum selectable date
`maxValue`	`DateValue`	—	Maximum selectable date
`disabled`	`boolean`	`false`	Disable the picker
`readonly`	`boolean`	`false`	Make the field read-only
`isDateDisabled`	`DateMatcher`	—	Function to disable specific dates
`isDateUnavailable`	`DateMatcher`	—	Function to mark dates unavailable
`locale`	`string`	`'en'`	Locale for formatting
`granularity`	`'day' \| 'month' \| 'year' \| 'hour' \| 'minute' \| 'second'`	—	Finest unit to display
`closeOnRangeSelect`	`boolean`	`true`	Close popover after selecting range
`numberOfMonths`	`number`	`1`	Months shown in calendar
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First day of week
`fixedWeeks`	`boolean`	`false`	Always show 6 weeks
`minDays`	`number`	—	Minimum range length
`maxDays`	`number`	—	Maximum range length
`required`	`boolean`	`false`	Mark as required
`onStartValueChange`	`(value) => void`	—	Called when start date changes
`onEndValueChange`	`(value) => void`	—	Called when end date changes

Sub-components

Component	Key Props	Description
`DateRangePicker.Label`	`class`	Label for the picker
`DateRangePicker.Input`	`type`, `name`, `class`	Segmented date input for start or end (`type="start" \| "end"`)
`DateRangePicker.Segment`	`part`, `class`	Individual date segment
`DateRangePicker.Trigger`	`class`	Button to open the calendar popover
`DateRangePicker.Content`	`side`, `sideOffset`, `class`	Popover container
`DateRangePicker.Calendar`	`class`	Pre-built range calendar with header and grid

Usage

<script>
  import { DateRangePicker } from '@chrissnell/chonky-ui';
  import { CalendarDate } from '@internationalized/date';

  let value = $state({
    start: new CalendarDate(2026, 4, 3),
    end: new CalendarDate(2026, 4, 10)
  });
</script>

<DateRangePicker.Root bind:value>
  <DateRangePicker.Label>Select range</DateRangePicker.Label>
  <div style="display: flex; align-items: center; gap: 0.25rem;">
    <DateRangePicker.Input type="start" />
    <span class="date-range-field-separator">–</span>
    <DateRangePicker.Input type="end" />
    <DateRangePicker.Trigger />
  </div>
  <DateRangePicker.Content>
    <DateRangePicker.Calendar />
  </DateRangePicker.Content>
</DateRangePicker.Root>