Date Range Picker
Select a date range with an interactive calendar
import { DateRangePicker } from "@plexui/ui/components/DateRangePicker";Examples
Overview
Select date range...
Limits
02/01/26-02/23/26
Shortcuts
Select date range...
Month stepper
size
February 2026
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateRange | null | — | Selected range ([start, end], inclusive) |
onChange | (next: DateRange | null, shortcut?: DateRangeShortcut) => void | — | Called when range changes |
min | DateTime | — | Earliest selectable date |
max | DateTime | — | Latest selectable date |
maxRangeDays | number | — | Max length of range in days (inclusive) |
shortcuts | DateRangeShortcut[] | — | Quick selection shortcuts |
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for popover |
sideOffset | number | 8 | Distance from trigger in pixels |
align | "start" | "center" | "end" | "center" | Preferred popover alignment |
alignOffset | number | 0 | 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 |
dropdownIconType | "chevronDown" | "dropdown" | "none" | "dropdown" | Icon shown at trigger end |
triggerClassName | string | — | Custom class for trigger |
triggerShowIcon | boolean | true | Show calendar icon at trigger start |
triggerStepperUnit | "month" | — | Enable month stepper mode in trigger |
triggerDateFormat | 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 |