Range Calendar
FormsA calendar component optimized for selecting date ranges. Displays two months side by side for easy range selection.
Import
import { RangeCalendar } from "@/components/ui/range-calendar";Usage
Basic Range Calendar
Select a date range by clicking two dates
December 2025
Su
Mo
Tu
We
Th
Fr
Sa
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
Single Month View
Compact version showing one month
December 2025
Su
Mo
Tu
We
Th
Fr
Sa
With Date Constraints
Limit selection to a specific range
December 2025
Su
Mo
Tu
We
Th
Fr
Sa
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
Selection limited to the next 60 days
Disabled Weekends
Prevent weekend selection
December 2025
Su
Mo
Tu
We
Th
Fr
Sa
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
Weekends cannot be selected
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | { start: Date; end: Date } | undefined | Controlled date range value |
defaultValue | { start: Date; end: Date } | undefined | Default range for uncontrolled usage |
onValueChange | (range: DateRange) => void | undefined | Callback when the date range changes |
defaultMonth | Date | new Date() | The initial month to display |
numberOfMonths | number | 2 | Number of months to display |
disabled | (date: Date) => boolean | undefined | Function to determine if a date should be disabled |
minDate | Date | undefined | Minimum selectable date |
maxDate | Date | undefined | Maximum selectable date |