Date Picker
A date and date-range picker composed from a Popover and the Calendar component.
Install
Composed from
Examples
Demo
A button that opens a calendar in a popover and shows the picked date.
Basic
A labelled date field that opens a single-date calendar.
Range Picker
Select a start and end date across two months with mode=range.
Date of Birth
A dropdown caption lets users jump to a distant month or year quickly.
Input
Type a date in the field or pick it from the calendar — the two stay in sync.
Time Picker
Pair a date picker with a native time input.
Natural Language
Parse phrases like “in 2 days” into a date with chrono-node.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">{date ? format(date) : "Pick a date"}</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar mode="single" selected={date} onSelect={setDate} />
</PopoverContent>
</Popover>
Guidelines
Conventions that keep usage consistent across an app.
Do
- Compose the picker from Popover + Calendar so it inherits their focus and keyboard behaviour.
- Mirror the calendar selection back into any text input so both stay in sync.
Don’t
- Don’t block typing — let users enter a date directly as well as pick one.