A date picker combines a date field and a calendar popover to allow users to select a date.
<DatePicker aria-label="Meeting date">
<DatePickerInput />
<DatePickerContent>
<Calendar />
</DatePickerContent>
</DatePicker>npx shadcn@latest add @dotui/date-pickerUse date pickers to allow users to select a date using a field and a calendar popover.
import { Calendar } from "@/components/ui/calendar";
import { DatePicker, DatePickerContent, DatePickerInput } from "@/components/ui/date-picker";
import { Label } from "@/components/ui/field";<DatePicker>
<Label>Date</Label>
<DatePickerInput />
<DatePickerContent>
<Calendar />
</DatePickerContent>
</DatePicker>Missing description.
| Prop | Type | Default | |
|---|---|---|---|
"sm" | "md" | "lg" | 'md' | ||
boolean | — | ||
boolean | — | ||
union | — | ||
string | — | ||
string | — | ||
ReactNode | function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Type | 'modal' | ||
Type | null | 'drawer' | ||
Omit<PopoverProps, "children" | CommonProps> | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.