Date Range Picker
A field showing the trip dates ("12 Jun · 15 Jun") that opens two months side by side, one on phones, with range highlight, hover preview and presets.
import { DateRangePicker } from "pleate/date-range-picker";Presets, locale and limits, sizes
Props
- value / defaultValue / onValueChange
Controlled or uncontrolled range.
{ from: Date | null, to: Date | null }- presets
Quick picks listed beside the months.
{ label, value: () => DateRange }[]- min / max / isDisabled
Limits.
Date / Date / (date) => boolean- locale / weekStartsOn
Month names, weekday names and the first weekday.
string / 0 to 6- variant / size
Same as Input.
filled | outline | surface | plain · sm | md | lg- name
Hidden ISO interval for forms (yyyy-mm-dd/yyyy-mm-dd).
string- clearable
Show the clear button once a date is set.
booleandefault true
Accessibility
- Each month is a grid: arrows, Page Up/Down (Shift for years), Home/End; Enter picks.
- Every day has its full date as label; today is aria-current="date".
- The first click sets the start, the second the end; Escape closes.