DateRangeField

A segmented date range input with start and end date segments. Each part of both dates is individually editable.

Example

Date 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
`minValue`	`DateValue`	—	Minimum allowed date
`maxValue`	`DateValue`	—	Maximum allowed date
`disabled`	`boolean`	`false`	Disable the field
`readonly`	`boolean`	`false`	Make the field read-only
`locale`	`string`	`'en'`	Locale for segment formatting
`granularity`	`'day' \| 'month' \| 'year' \| 'hour' \| 'minute' \| 'second'`	—	Finest unit to display
`hourCycle`	`12 \| 24`	—	12 or 24-hour time format
`hideTimeZone`	`boolean`	`false`	Hide time zone segment
`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
`DateRangeField.Label`	`class`	Label for the field
`DateRangeField.Input`	`type`, `name`, `class`	Segmented date input for start or end (`type="start" \| "end"`)
`DateRangeField.Segment`	`part`, `class`	Individual date segment

Usage

<script>
  import { DateRangeField } 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>

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