Date Picker
A field that opens a calendar: popover on desktop, bottom sheet on phones. Single dates or ranges, presets, limits, localized names.
import { DatePicker } from "pleate/date-picker";Single, range with presets, standalone calendar
Departure
Stay
Meeting day
MTWTFSS
Props
- mode
One day or a from and to pair.
"single" | "range"default "single"- value / defaultValue / onValueChange
Selection.
Date | null · { from, to }- min / max / isDisabled
Limits.
Date / Date / (date) => boolean- presets
Quick picks.
{ label, value: () => V }[]- locale / weekStartsOn / formatOptions
Localization.
string / 0 to 6 / Intl options- name
Hidden ISO value for forms (yyyy-mm-dd or yyyy-mm-dd/yyyy-mm-dd).
string
Accessibility
- The calendar is a grid: arrows, Page Up/Down (Shift for years), Home/End, Enter.
- Every day has its full date as label; today is aria-current="date".