Date Picker

A calendar popover behind an outline trigger — one date, or a range that reads as a single label.

tsx

1import { DatePicker, DateRangePicker } from "@pestoui/core"

Single date

Controlled the moment you pass value; the popover closes as soon as a day is picked.

Wednesday, August 12, 2026

Two months side by side. The popover stays open until both ends are committed.

Aug 4 – Aug 12, 2026

Left alone, both pickers keep their own state. dateFormat is any date-fns pattern.

Prop	Type	Default	Description
value	Date \| DateRange	—	Controlled selection. Passing it at all makes the picker controlled — DatePicker takes a Date, DateRangePicker a DateRange.
defaultValue	Date \| DateRange	—	Initial selection for the uncontrolled picker.
onValueChange	(value: Date \| undefined) => void	—	Fires on every selection, including when it is cleared. DateRangePicker hands back a DateRange.
placeholder	string	"Pick a date"	Trigger label while nothing is selected. DateRangePicker defaults to “Pick a date range”.
dateFormat	string	"MMM d, yyyy"	date-fns pattern used for the trigger label.
align	"start" \| "center" \| "end"	"start"	Where the popover lines up against the trigger.
numberOfMonths	number	2	Months shown side by side. DateRangePicker only.
variant	"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "inverse" \| "link"	"outline"	Trigger button style — the picker forwards every Button prop.
size	"xs" \| "sm" \| "default" \| "lg" \| "xl"	"default"	Trigger button height and padding.

Pesto UI · 117 documented components