Date & Time

DateRangePicker

Start and end segmented inputs in one field, backed by a two-month range calendar. Constrain the span with minDays/maxDays and add per-endpoint time entry.

Playground

Experiment with different props in real-time.

07202026

07242026

Variant

Color

Size

Calendar

Time input

Basic Usage

Bind a DateRange with start and end.

07202026

07242026

<script lang="ts">
  import { DateRangePicker } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';
  import type { DateRange } from 'bits-ui';

  const now = today(getLocalTimeZone());
  let value = $state<DateRange>({ start: now, end: now.add({ days: 4 }) });
</script>

<DateRangePicker bind:value />

Day Constraints

Limit the length of the selected range.

mmddyyyy

<!-- Enforce a 3 to 10 night stay -->
<DateRangePicker minDays={3} maxDays={10} />

Time Input

Set timeInput to add start and end time fields below the calendar.

mmddyyyy––––AM

<!-- Start and end time fields below the calendar -->
<DateRangePicker timeInput />

Single Month

mmddyyyy

<!-- One month instead of the default two -->
<DateRangePicker numberOfMonths={1} />

Min & Max

mmddyyyy

<script lang="ts">
  import { DateRangePicker } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  const now = today(getLocalTimeZone());
</script>

<DateRangePicker minValue={now} maxValue={now.add({ months: 2 })} />

Variants

mmddyyyy

<DateRangePicker variant="outline" />
<DateRangePicker variant="soft" />
<DateRangePicker variant="subtle" />
<DateRangePicker variant="ghost" />

Sizes

mmddyyyy

<DateRangePicker size="xs" />
<DateRangePicker size="md" />
<DateRangePicker size="xl" />

Form Field

The range submits as {name}-start and {name}-end hidden inputs.

Stay dates

mmddyyyy

Please pick a date range

<script lang="ts">
  import { DateRangePicker, FormField } from 'sv5ui';
  import type { DateRange } from 'bits-ui';

  let range = $state<DateRange | undefined>(undefined);
  const error = $derived(
    range?.start && range?.end ? '' : 'Please pick a date range'
  );
</script>

<FormField label="Stay dates" {error}>
  <!-- Submits {name}-start and {name}-end hidden inputs -->
  <DateRangePicker bind:value={range} name="stay" />
</FormField>

UI Slots

Use the ui prop to override classes. Pass ui.calendarSlots to reach the calendar's own slots.

Slot	Description
`root`	`The field wrapper`
`field`	`The field container`
`input`	`The start and end segmented inputs`
`separator`	`The icon between the two inputs`
`trigger`	`The calendar popover trigger button`
`content`	`The popover content`
`calendar`	`The two-month range calendar`
`time`	`The time-input row (when timeInput is set)`

Props

Prop	Type	Default	Description
`value`	`DateRange`	`-`	`Selected range { start, end } (bindable)`
`onValueChange`	`(value) => void`	`-`	`Callback when a complete range is committed`
`placeholder`	`DateValue`	`current date`	`Anchors the empty field and calendar view`
`open`	`boolean`	`false`	`Popover open state (bindable)`
`minDays`	`number`	`-`	`Minimum number of days in the range`
`maxDays`	`number`	`-`	`Maximum number of days in the range`
`granularity`	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	`Which segments render`
`locale`	`string`	`'en'`	`Locale for formatting`
`minValue`	`DateValue`	`-`	`Earliest selectable date`
`maxValue`	`DateValue`	`-`	`Latest selectable date`
`isDateDisabled`	`DateMatcher`	`-`	`Predicate marking dates as disabled`
`excludeDisabled`	`boolean`	`false`	`Clear range if a date inside becomes disabled`
`timeInput`	`boolean`	`false`	`Show start/end time fields below the calendar`
`closeOnRangeSelect`	`boolean`	`true`	`Close after a complete range (false with timeInput)`
`numberOfMonths`	`number`	`2`	`Months shown in the popover`
`separatorIcon`	`string`	`'lucide:minus'`	`Icon between the two inputs`
`icon`	`string`	`'lucide:calendar'`	`Trigger button icon`
`variant`	`'outline' \| 'soft' \| 'subtle' \| 'ghost' \| 'none'`	`'outline'`	`Field visual style`
`calendarVariant`	`'solid' \| 'outline' \| 'soft' \| 'subtle'`	`'solid'`	`Calendar visual style`
`color`	`ColorType`	`'primary'`	`Focus and highlight color`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Field size`
`disabled`	`boolean`	`false`	`Disable interaction`
`readonly`	`boolean`	`false`	`Read-only field`
`required`	`boolean`	`false`	`Required for forms`
`name`	`string`	`-`	`Base name for {name}-start / {name}-end inputs`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

DatePicker TimeField