Date Picker
Input-style trigger opening a calendar in a popover.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/date-picker.jsonUsage
import { DatePicker } from "@/components/ui/date-picker";
<DatePicker
value={date}
onValueChange={setDate}
placeholder="Due date"
/>Custom label formatting:
<DatePicker
value={date}
onValueChange={setDate}
format={(d) => d.toLocaleDateString("en-IN", { dateStyle: "long" })}
/>For ranges or inline calendars, compose Calendar with Popover directly; this component is the common single-date case packaged.
Props
| Prop | Type | Default |
|---|---|---|
value / onValueChange | Date / (d?: Date) => void | uncontrolled |
placeholder | string | Pick a date |
format | (date: Date) => string | medium date |
disabled | boolean | false |
Accessibility
- The trigger is a labeled button showing the current value; the popover calendar inherits react-day-picker's keyboard model, and selection closes the popover and returns focus to the trigger.