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>pnpm dlx 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 | |
|---|---|---|---|
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| | ||
| | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.