Range Calendar Picker
Button + Popover + RangeCalendar bundle. The DatePicker equivalent for date ranges.
Default
Click to open, pick start and end dates.
Single month
Set numberOfMonths to 1 for a more compact popover.
Sizes
The trigger button comes in sm, default, and lg sizes.
API Reference
Props, events, and slots for each sub-component.
RangeCalendarPicker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | DateRangeValue | null | null | Selected { start, end } range. Supports v-model. |
| placeholder | string | "Pick a date range" | Trigger text when nothing is selected. |
| disabled | boolean | false | Disable the trigger. |
| numberOfMonths | number | 2 | Months shown side by side in the popover. |
| min | Date | null | null | Earliest selectable date. |
| max | Date | null | null | Latest selectable date. |
| size | "default" | "sm" | "lg" | "sm" | Trigger button size. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires with the chosen range. Enables v-model. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Space | Opens the range calendar popover from the trigger. |
| Enter | Opens the popover, or selects a range endpoint inside the grid. |
| ← | Moves to the previous day. |
| → | Moves to the next day. |
| ↑ | Moves to the same day in the previous week. |
| ↓ | Moves to the same day in the next week. |
| Esc | Closes the popover and returns focus to the trigger. |
- Composes a button, popover, and range calendar grid.
- The first Enter sets the range start; the second sets the range end.
- Focus moves into the grid on open and back to the trigger on close.