Skip to main content
The RangeCalendar functionality is built into the Calendar component. Use the range prop to enable range selection.

​
See Also

Calendar

Use the Calendar component with the range prop to select date ranges.

​
Quick Example

<template>
  <UCalendar v-model="dateRange" range />
</template>

<script setup>
import { ref } from 'vue'
import { getLocalTimeZone, today } from '@internationalized/date'

const dateRange = ref({
  start: today(getLocalTimeZone()),
  end: today(getLocalTimeZone()).add({ days: 7 })
})
</script>

​
Features

When using the Calendar component with range prop:
  • Start and end dates: Users can select a range by clicking two dates
  • Visual feedback: The range between selected dates is highlighted
  • Keyboard navigation: Navigate through dates using arrow keys
  • Customizable: Control appearance with colors, sizes, and variants
  • Month/year navigation: Built-in controls for browsing dates

​
Common Use Cases

  • Booking systems: Select check-in and check-out dates
  • Date filters: Filter data by a date range
  • Event planning: Choose event start and end dates
  • Report generation: Select date ranges for reports
  • Availability selection: Mark available date ranges

​
Working with Date Ranges

The Calendar component with range mode returns a DateRange object: 
interface DateRange {
  start: DateValue
  end: DateValue
}

​
Advanced Example

<template>
  <div>
    <UCalendar
      v-model="dateRange"
      range
      color="primary"
      size="lg"
    />
    <div v-if="dateRange" class="mt-4">
      <p>Selected range:</p>
      <p>From: {{ formatDate(dateRange.start) }}</p>
      <p>To: {{ formatDate(dateRange.end) }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getLocalTimeZone, today } from '@internationalized/date'

const dateRange = ref({
  start: today(getLocalTimeZone()),
  end: today(getLocalTimeZone()).add({ days: 7 })
})

const formatDate = (date) => {
  return date.toDate(getLocalTimeZone()).toLocaleDateString()
}
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us