Components
Date Picker
A calendar in a popover, bound to an input-style trigger.
Default
const [date, setDate] = useState<Date | undefined>(undefined);
<Popover>
<PopoverTrigger render={<Button variant="outline" className="w-56 justify-start font-normal" />}>
<CalendarIcon className="size-4" />
{date ? format(date, "PPP") : "Pick a date"}
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar mode="single" selected={date} onSelect={setDate} />
</PopoverContent>
</Popover>Range picker
const [range, setRange] = useState<DateRange | undefined>();
<Calendar
mode="range"
selected={range}
onSelect={setRange}
numberOfMonths={2}
/>Time picker
Pair the date button with a native <input type="time">. Related variants: captionLayout="dropdown" gives a date-of-birth picker with year/month dropdowns; wrapping the trigger in an InputGroup yields a typeable input picker; and a chrono-node parser turns natural-language input ("next friday") into a date.
Markdown for agents: /design/date-picker.md · spec: /design.md