Date Range Picker

Choose an inclusive date interval across calendar pages.

Usage

Booking

Choose an inclusive start and end date for a reservation.

<!-- Date Range Picker / Booking -->
<script setup lang="ts">
import { DateRangePickerRoot, DateRangePickerAnchor, DateRangePickerStartInput, DateRangePickerEndInput, DateRangePickerTrigger, DateRangePickerContent, DateRangePickerPreviousWeek, DateRangePickerPreviousMonth, DateRangePickerPreviousYear, DateRangePickerNextWeek, DateRangePickerNextMonth, DateRangePickerNextYear, DateRangePickerWeekViewTrigger, DateRangePickerMonthViewTrigger, DateRangePickerYearViewTrigger, DateRangePickerGrid, DateRangePickerCell, DateRangePickerMonthCell } from '@sectile/vue/date-range-picker'
import { CalendarDays } from '@lucide/vue'
const initialRange = {
  start: { year: 2026, month: 8, day: 22 },
  end: { year: 2026, month: 8, day: 25 },
}
const unavailableDates = new Set(['2026-08-27', '2026-08-29'])
const policies = {
  unavailable: (value: { year: number; month: number; day: number }) =>
    unavailableDates.has(
      [value.year, String(value.month).padStart(2, '0'), String(value.day).padStart(2, '0')].join('-'),
    ),
}
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

</script>

<template>
  <DateRangePickerRoot :default-value="initialRange" :policies="policies" v-slot="{ dates, months, view, viewMode }" class="catalog-stack catalog-temporal-picker">
    <DateRangePickerAnchor class="catalog-inline">
      <DateRangePickerStartInput class="catalog-input" />
      <DateRangePickerEndInput class="catalog-input" />
      <DateRangePickerTrigger class="catalog-picker-trigger" aria-label="Open date range picker">
        <CalendarDays :size="18" aria-hidden="true" />
      </DateRangePickerTrigger>
    </DateRangePickerAnchor>
    <DateRangePickerContent class="catalog-popup catalog-picker-popup catalog-picker-popup--floating">
      <div class="catalog-picker-toolbar">
        <div class="catalog-inline">
          <DateRangePickerPreviousWeek v-if="viewMode === 'week'">‹</DateRangePickerPreviousWeek>
          <DateRangePickerPreviousMonth v-else-if="viewMode === 'month'">‹</DateRangePickerPreviousMonth>
          <DateRangePickerPreviousYear v-else>‹</DateRangePickerPreviousYear>
          <strong>{{ viewMode === 'year' ? view.year : monthNames[view.month - 1] + ' ' + view.year }}</strong>
          <DateRangePickerNextWeek v-if="viewMode === 'week'">›</DateRangePickerNextWeek>
          <DateRangePickerNextMonth v-else-if="viewMode === 'month'">›</DateRangePickerNextMonth>
          <DateRangePickerNextYear v-else>›</DateRangePickerNextYear>
        </div>
        <div class="catalog-view-switch">
          <DateRangePickerWeekViewTrigger>Week</DateRangePickerWeekViewTrigger>
          <DateRangePickerMonthViewTrigger>Month</DateRangePickerMonthViewTrigger>
          <DateRangePickerYearViewTrigger>Year</DateRangePickerYearViewTrigger>
        </div>
      </div>

      <DateRangePickerGrid v-if="viewMode !== 'year'" class="catalog-calendar" :data-view="viewMode">
        <DateRangePickerCell
          v-for="day in dates.flat()"
          :key="[day.year, day.month, day.day].join('-')"
          :value="day"
        >
          {{ day.day }}
        </DateRangePickerCell>
      </DateRangePickerGrid>
      <DateRangePickerGrid v-else class="catalog-month-grid">
        <DateRangePickerMonthCell
          v-for="month in months.flat()"
          :key="[month.year, month.month].join('-')"
          :value="month"
        >
          {{ monthNames[month.month - 1] }}
        </DateRangePickerMonthCell>
      </DateRangePickerGrid>
    </DateRangePickerContent>
  </DateRangePickerRoot>
</template>

Bounded

Reject values outside the configured minimum and maximum.

<!-- Date Range Picker / Bounded -->
<script setup lang="ts">
import { DateRangePickerRoot, DateRangePickerAnchor, DateRangePickerStartInput, DateRangePickerEndInput, DateRangePickerTrigger, DateRangePickerContent, DateRangePickerPreviousWeek, DateRangePickerPreviousMonth, DateRangePickerPreviousYear, DateRangePickerNextWeek, DateRangePickerNextMonth, DateRangePickerNextYear, DateRangePickerWeekViewTrigger, DateRangePickerMonthViewTrigger, DateRangePickerYearViewTrigger, DateRangePickerGrid, DateRangePickerCell, DateRangePickerMonthCell } from '@sectile/vue/date-range-picker'
import { CalendarDays } from '@lucide/vue'
const initialRange = {
  start: { year: 2026, month: 8, day: 22 },
  end: { year: 2026, month: 8, day: 25 },
}
const unavailableDates = new Set(['2026-08-27', '2026-08-29'])
const policies = {
  unavailable: (value: { year: number; month: number; day: number }) =>
    unavailableDates.has(
      [value.year, String(value.month).padStart(2, '0'), String(value.day).padStart(2, '0')].join('-'),
    ),
}
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

</script>

<template>
  <DateRangePickerRoot :default-value="initialRange" :policies="policies" v-slot="{ dates, months, view, viewMode }" class="catalog-stack catalog-temporal-picker">
    <DateRangePickerAnchor class="catalog-inline">
      <DateRangePickerStartInput class="catalog-input" />
      <DateRangePickerEndInput class="catalog-input" />
      <DateRangePickerTrigger class="catalog-picker-trigger" aria-label="Open date range picker">
        <CalendarDays :size="18" aria-hidden="true" />
      </DateRangePickerTrigger>
    </DateRangePickerAnchor>
    <DateRangePickerContent class="catalog-popup catalog-picker-popup catalog-picker-popup--floating">
      <div class="catalog-picker-toolbar">
        <div class="catalog-inline">
          <DateRangePickerPreviousWeek v-if="viewMode === 'week'">‹</DateRangePickerPreviousWeek>
          <DateRangePickerPreviousMonth v-else-if="viewMode === 'month'">‹</DateRangePickerPreviousMonth>
          <DateRangePickerPreviousYear v-else>‹</DateRangePickerPreviousYear>
          <strong>{{ viewMode === 'year' ? view.year : monthNames[view.month - 1] + ' ' + view.year }}</strong>
          <DateRangePickerNextWeek v-if="viewMode === 'week'">›</DateRangePickerNextWeek>
          <DateRangePickerNextMonth v-else-if="viewMode === 'month'">›</DateRangePickerNextMonth>
          <DateRangePickerNextYear v-else>›</DateRangePickerNextYear>
        </div>
        <div class="catalog-view-switch">
          <DateRangePickerWeekViewTrigger>Week</DateRangePickerWeekViewTrigger>
          <DateRangePickerMonthViewTrigger>Month</DateRangePickerMonthViewTrigger>
          <DateRangePickerYearViewTrigger>Year</DateRangePickerYearViewTrigger>
        </div>
      </div>

      <DateRangePickerGrid v-if="viewMode !== 'year'" class="catalog-calendar" :data-view="viewMode">
        <DateRangePickerCell
          v-for="day in dates.flat()"
          :key="[day.year, day.month, day.day].join('-')"
          :value="day"
        >
          {{ day.day }}
        </DateRangePickerCell>
      </DateRangePickerGrid>
      <DateRangePickerGrid v-else class="catalog-month-grid">
        <DateRangePickerMonthCell
          v-for="month in months.flat()"
          :key="[month.year, month.month].join('-')"
          :value="month"
        >
          {{ monthNames[month.month - 1] }}
        </DateRangePickerMonthCell>
      </DateRangePickerGrid>
    </DateRangePickerContent>
  </DateRangePickerRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Date Range Picker / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangePickerRoot, DateRangePickerAnchor, DateRangePickerStartInput, DateRangePickerEndInput, DateRangePickerTrigger, DateRangePickerContent, DateRangePickerPreviousWeek, DateRangePickerPreviousMonth, DateRangePickerPreviousYear, DateRangePickerNextWeek, DateRangePickerNextMonth, DateRangePickerNextYear, DateRangePickerWeekViewTrigger, DateRangePickerMonthViewTrigger, DateRangePickerYearViewTrigger, DateRangePickerGrid, DateRangePickerCell, DateRangePickerMonthCell } from '@sectile/vue/date-range-picker'
import { CalendarDays } from '@lucide/vue'
const initialRange = {
  start: { year: 2026, month: 8, day: 22 },
  end: { year: 2026, month: 8, day: 25 },
}
const unavailableDates = new Set(['2026-08-27', '2026-08-29'])
const policies = {
  unavailable: (value: { year: number; month: number; day: number }) =>
    unavailableDates.has(
      [value.year, String(value.month).padStart(2, '0'), String(value.day).padStart(2, '0')].join('-'),
    ),
}
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']


const value = ref(initialRange)
</script>

<template>
  <DateRangePickerRoot v-model="value" :policies="policies" v-slot="{ dates, months, view, viewMode }" class="catalog-stack catalog-temporal-picker">
    <DateRangePickerAnchor class="catalog-inline">
      <DateRangePickerStartInput class="catalog-input" />
      <DateRangePickerEndInput class="catalog-input" />
      <DateRangePickerTrigger class="catalog-picker-trigger" aria-label="Open date range picker">
        <CalendarDays :size="18" aria-hidden="true" />
      </DateRangePickerTrigger>
    </DateRangePickerAnchor>
    <DateRangePickerContent class="catalog-popup catalog-picker-popup catalog-picker-popup--floating">
      <div class="catalog-picker-toolbar">
        <div class="catalog-inline">
          <DateRangePickerPreviousWeek v-if="viewMode === 'week'">‹</DateRangePickerPreviousWeek>
          <DateRangePickerPreviousMonth v-else-if="viewMode === 'month'">‹</DateRangePickerPreviousMonth>
          <DateRangePickerPreviousYear v-else>‹</DateRangePickerPreviousYear>
          <strong>{{ viewMode === 'year' ? view.year : monthNames[view.month - 1] + ' ' + view.year }}</strong>
          <DateRangePickerNextWeek v-if="viewMode === 'week'">›</DateRangePickerNextWeek>
          <DateRangePickerNextMonth v-else-if="viewMode === 'month'">›</DateRangePickerNextMonth>
          <DateRangePickerNextYear v-else>›</DateRangePickerNextYear>
        </div>
        <div class="catalog-view-switch">
          <DateRangePickerWeekViewTrigger>Week</DateRangePickerWeekViewTrigger>
          <DateRangePickerMonthViewTrigger>Month</DateRangePickerMonthViewTrigger>
          <DateRangePickerYearViewTrigger>Year</DateRangePickerYearViewTrigger>
        </div>
      </div>

      <DateRangePickerGrid v-if="viewMode !== 'year'" class="catalog-calendar" :data-view="viewMode">
        <DateRangePickerCell
          v-for="day in dates.flat()"
          :key="[day.year, day.month, day.day].join('-')"
          :value="day"
        >
          {{ day.day }}
        </DateRangePickerCell>
      </DateRangePickerGrid>
      <DateRangePickerGrid v-else class="catalog-month-grid">
        <DateRangePickerMonthCell
          v-for="month in months.flat()"
          :key="[month.year, month.month].join('-')"
          :value="month"
        >
          {{ monthNames[month.month - 1] }}
        </DateRangePickerMonthCell>
      </DateRangePickerGrid>
    </DateRangePickerContent>
  </DateRangePickerRoot>
</template>

Floating positioning

This component uses the shared positioning engine. Use the live positioning example to change side, align, offsets, collision boundaries, strategy, and tracking while inspecting the resolved placement.

API

Vue package: @sectile/vue/temporal/date-range-picker

Components

DateRangePickerRoot
DateRangePickerTrigger
DateRangePickerAnchor
DateRangePickerPortal
DateRangePickerContent
DateRangePickerGrid
DateRangePickerCell
DateRangePickerMonthCell
DateRangePickerStartInput
DateRangePickerEndInput
DateRangePickerPreviousWeek
DateRangePickerNextWeek
DateRangePickerPreviousMonth
DateRangePickerNextMonth
DateRangePickerPreviousYear
DateRangePickerNextYear
DateRangePickerWeekViewTrigger
DateRangePickerMonthViewTrigger
DateRangePickerYearViewTrigger

Props

`DateRangePickerRootProps`

align: TypePickerPositionOptions['align']Default'center'
Alignment of positioned content relative to its anchor.
as: TypePrimitiveAsDefaultundefined
Element or component rendered for this part.
asChild: TypebooleanDefaultundefined
Whether to merge this part into its single child instead of rendering a wrapper.
avoidCollisions: TypebooleanDefaulttrue
Whether positioned content may flip or shift to remain visible.
collisionBoundary: TypePickerPositionOptions['collisionBoundary']Defaultundefined
Boundary used to keep positioned content visible.
collisionPadding: TypePickerPositionOptions['collisionPadding']Default8
Space kept between positioned content and its collision boundary.
defaultHighlightedValue: TypeDateValueDefaultundefined
Initially highlighted value for uncontrolled state.
defaultOpen: TypebooleanDefaultfalse
Initial uncontrolled open state.
defaultValue: TypeDateRange | nullDefaultnull
Initial value used when the component owns its state.
defaultView: TypePickerRootSlotProps['viewMode']Default'month'
Initial calendar or picker view.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
hideWhenDetached: TypebooleanDefaultfalse
Whether positioned content hides when its anchor leaves the layout.
highlightedValue: TypeDateValueDefaultundefined
Value currently highlighted for keyboard interaction.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: TypeDateRange | nullDefaultundefined
Current value when state is controlled by the parent.
open: TypebooleanDefaultundefined
Whether the associated popup or disclosure is open.
policies: TypeDateRangePickerOptions['policies']Defaultundefined
Behavior policies that customize validation, movement, or selection.
position: TypebooleanDefaulttrue
Whether the popup is positioned relative to its trigger.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
referenceDate: TypeDateValueDefaultundefined
Deterministic civil date used when a calendar has no selected or highlighted value.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.
side: TypePickerPositionOptions['side']Default'bottom'
Preferred side of the anchor for positioned content.
sideOffset: TypenumberDefault8
Distance between positioned content and its anchor.
strategy: TypePickerPositionOptions['strategy']Default'absolute'
CSS positioning strategy used for anchored content.
tracking: TypePickerPositionOptions['tracking']Defaultundefined
Update strategy used while anchored content is open.

`DateRangePickerPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

`DateRangePickerPortalProps`

defer: TypebooleanDefaultfalse
Whether Teleport target resolution waits until the end of the current mount or update tick.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
to: Typestring | HTMLElementDefault'body'
Teleport target for portalled content.

Slots

`DateRangePickerRootSlotProps`

dates: Typereadonly (readonly DateValue[])[]
Dates projected by the active view.
disabled: Typeboolean
Whether interaction is unavailable.
highlightedValue: TypeDateValue
Value currently highlighted for interaction.
months: Typereadonly (readonly CalendarMonthValue[])[]
Months projected by the active view.
open: Typeboolean
Whether the associated popup or disclosure is open.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: TypeValue
Current value exposed by this contract.
view: Type{ readonly year: number; readonly month: number }
Current calendar anchor.
viewMode: TypeCalendarViewMode
Active calendar view mode.
years: Typereadonly (readonly PickerYearValue[])[]
Years projected by the active view.

`DateRangePickerCellSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
inRange: Typeboolean
Whether this value lies inside the selected range.
outsideMonth: Typeboolean
Whether this date belongs to an adjacent month.
selected: Typeboolean
Whether this item is selected.
value: TypeDateValue
Current value exposed by this contract.

`DateRangePickerMonthCellSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
inRange: Typeboolean
Whether this value lies inside the selected range.
selected: Typeboolean
Whether this item is selected.
value: TypeCalendarMonthValue
Current value exposed by this contract.

Other types

`DateRangePickerValueChangeHandler`

type DateRangePickerValueChangeHandler = NonNullable<InstanceType<typeof DateRangePickerRoot>['$props']['onUpdate:modelValue']>

`DateRangePickerOpenChangeHandler`

type DateRangePickerOpenChangeHandler = NonNullable<InstanceType<typeof DateRangePickerRoot>['$props']['onUpdate:open']>

`DateRangePickerHighlightedValueChangeHandler`

type DateRangePickerHighlightedValueChangeHandler = NonNullable<InstanceType<typeof DateRangePickerRoot>['$props']['onUpdate:highlightedValue']>

`DateRange`

Name	Type	Required
`start`	`DateValue`	Yes
`end`	`DateValue`	Yes

`DateValue`

Name	Type	Required
`year`	`number`	Yes
`month`	`number`	Yes
`day`	`number`	Yes

Parts

Shared scope: [data-scope="date-range-picker"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`start-input`	`[data-part="start-input"]`	Edits the start value.	—
`end-input`	`[data-part="end-input"]`	Edits the end value.	—
`anchor`	`[data-part="anchor"]`	Provides the positioning reference for floating content.	—
`trigger`	`[data-part="trigger"]`	Opens, closes, or activates the associated content.	—
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—
`week-view-trigger`	`[data-part="week-view-trigger"]`	Switches the calendar to the week view.	—
`month-view-trigger`	`[data-part="month-view-trigger"]`	Switches the calendar to the month view.	—
`year-view-trigger`	`[data-part="year-view-trigger"]`	Switches the calendar to the year view.	—
`previous-week`	`[data-part="previous-week"]`	Moves to the previous week.	—
`next-week`	`[data-part="next-week"]`	Moves to the next week.	—
`previous-month`	`[data-part="previous-month"]`	Moves to the previous month.	—
`next-month`	`[data-part="next-month"]`	Moves to the next month.	—
`previous-year`	`[data-part="previous-year"]`	Moves to the previous year.	—
`next-year`	`[data-part="next-year"]`	Moves to the next year.	—
`grid`	`[data-part="grid"]`	Groups cells into a navigable two-dimensional structure.	—
`cell`	`[data-part="cell"]`	Represents one navigable or selectable grid value.	—
`month-cell`	`[data-part="month-cell"]`	Represents one selectable month.	—

Keyboard interaction

Key	Behavior
`Arrow keys`	Move the highlighted date by one day or one week.
`Home` / `End`	Move to the start or end of the week.
`Page Up` / `Page Down`	Move by one month; hold Shift to move by one year.
`Enter` / `Space`	Select the highlighted date.
`Escape`	Close the calendar without selecting another date.

Accessibility

Start and end inputs share a calendar grid while keeping each endpoint independently labeled.

Date Range Picker ​

Usage ​

Booking ​

Bounded ​

Controlled ​

Floating positioning ​

API ​

Props ​

DateRangePickerRootProps ​

DateRangePickerPartProps ​

DateRangePickerPortalProps ​

Slots ​

DateRangePickerRootSlotProps ​

DateRangePickerCellSlotProps ​

DateRangePickerMonthCellSlotProps ​

Other types ​

DateRangePickerValueChangeHandler ​

DateRangePickerOpenChangeHandler ​

DateRangePickerHighlightedValueChangeHandler ​

DateRange ​

DateValue ​

Parts ​

Keyboard interaction ​

Accessibility ​