Date Range Picker
Date range picker with an interactive calendar, min/max limits, preset shortcuts, and a month stepper for selecting start and end dates.
import { DateRangePicker } from "@plexui/vue/components/DateRangePicker";Examples
Overview
Limits
Shortcuts
Month stepper
size
API
In the calendars, the arrow keys move focus by a day or a week, Home and End move it to the Sunday or Saturday of the week, and Page Up and Page Down move it by a month (January 31 goes to the last day of February). Focus moves across the visible months, and a day past them turns the calendars by a month first. Focus stays put when the day it would move to is disabled: outside min and max, or past max-range-days while a range is being picked. Enter and Space pick the focused day.
| Prop | Type | Default | Description |
|---|---|---|---|
value / v-model:value | DateRange | null | — | Selected range ([start, end], inclusive) |
@change | (next: DateRange | null, shortcut?: DateRangeShortcut) => void | — | Emitted when the range changes |
min | DateTime | — | Earliest selectable date (inclusive) |
max | DateTime | — | Latest selectable date (inclusive). Must not be before min |
max-range-days | number | — | Max length of range in days (inclusive) |
shortcuts | DateRangeShortcut[] | — | Quick selection shortcuts ({ label, getDateRange }) |
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for popover |
side-offset | number | 8 | Distance from trigger in pixels |
align | "start" | "center" | "end" | "center" | Preferred popover alignment |
align-offset | number | 0 (center), -5 (start, end) | Offset from start/end alignment in pixels |
disabled | boolean | false | Disable picker interactions |
placeholder | string | "Select date range..." | Placeholder in trigger when value is empty |
variant | "soft" | "outline" | "ghost" | "outline" | Trigger style variant |
pill | boolean | true | Rounded trigger shape |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Trigger size scale |
dropdown-icon-type | "chevronDown" | "dropdown" | "none" | "dropdown" | Icon shown at trigger end |
trigger-class-name | string | — | Custom class for trigger |
trigger-show-icon | boolean | true | Show calendar icon at trigger start |
trigger-stepper-unit | "month" | — | Enable month stepper mode in trigger |
trigger-date-format | string | "MM/dd/yy" | Date formatting in trigger text |
clearable | boolean | false | Show clear button in trigger |
block | boolean | false | Stretch trigger to full available width |
Styling
Date Range Picker reads these component tokens. Override them at any scope to restyle it:
--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-hover: outline border color hover (defaultlight-dark(var(--alpha-25), var(--alpha-30)))--input-placeholder-text-color: placeholder text color (defaultvar(--color-text-tertiary))--input-text-color: text color (defaultvar(--color-text))--select-control-font-weight: font weight (defaultvar(--font-weight-normal))