Components
Date Picker
A compact date input that opens a calendar in a popover on click. It fits forms and toolbars where a full inline grid would take too much room.
Date Picker is a higher-order pattern, composed from Calendar, Popover, and Button. The Popover holds the Calendar primitive; the Button shows the chosen date and opens it.
Preview
Rendered with live Cognition tokens. Click to open the calendar, no dark: classes.
Variants
<DatePicker /><DateRangePicker /><DatePicker placeholder="Select your start date" /><DatePicker clearable />Single date, a date range, a custom placeholder, and a clearable input. Select a date in the clearable one to reveal its clear control.
States
Closed. Just the trigger.
Date selected. The trigger shows the value.
Range selected. Both ends are shown.
Disabled. The calendar cannot open.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Open. The calendar drops in a popover under the trigger (shown statically).
The trigger summarizes the selection; opening reveals the same Calendar grid documented on its own page.
API
DateRangePicker is the range form of the same composition.
Don't and Do
Don't hide date selection behind a Date Picker when choosing a date is the main thing the reader came to do. Making them open a popover to reach the grid adds a step. When date selection is the primary action, show a Calendar directly.
<DatePicker placeholder="Due date" />Use it in forms, filter toolbars, and anywhere a compact date input is needed.
import { DatePicker } from "@/components/ui/date-picker";
export function DueDateField() {
return <DatePicker placeholder="Due date" clearable />;
}