027
Date Picker
FormNo date
Customize
Range
Field
Disabled
Code
<Field label="Due" description="Deadline for the draft">
<DatePicker
value={date}
onValueChange={setDate}
/>
</Field>Install
npx shadcn@latest add https://components.haedong.dev/r/date-picker.json
Props
Single date. Calendar's minDate / maxDate / disabledDates / weekStartsOn pass through. Label it with aria-label / aria-labelledby or wrap it in Field.
| Prop | Type | Description |
|---|---|---|
| value / defaultValue | Date | Picked date (controlled / uncontrolled). |
| onValueChange | (value: Date | undefined) => void | Called when a day is picked (the popover then closes) or the pick is cleared. |
| placeholder | string | Muted uppercase when nothing is picked. Defaults to "Pick a date". |
| format | (date: Date) => string | How the date reads in the trigger. Defaults to "Sep 9, 2026". |
| name | string | Renders a hidden input with the date as yyyy-mm-dd. |
| disabled | boolean | Dims the trigger to 40% and drops pointer events. |