A button that shows the chosen date and opens a calendar popover. Picking a day fills it and closes.
No due date
pnpm dlx shadcn@latest add @latheui/date-pickerPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Date Picker is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native button attributes, which go to the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | — | Controlled date. |
| defaultValue | Date | null | null | Initial date when uncontrolled. |
| onValueChange | (date: Date) => void | — | Called when a day is picked. |
| label | string | "Date" | Accessible name, read before the chosen date. |
| placeholder | string | "Pick a date" | Shown when no date is chosen. |
| format | Intl.DateTimeFormatOptions | { dateStyle: "medium" } | How the date is written on the button. |
| locale | string | "en-US" | Locale for the button and the calendar. |
| min | Date | — | Earliest selectable day. |
| max | Date | — | Latest selectable day. |
| isDateDisabled | (date: Date) => boolean | — | Return true for days that cannot be picked. |
| weekStartsOn | 0 | 1 | 0 | 0 for Sunday, 1 for Monday. |
| defaultMonth | Date | — | Month shown first when there is no value. |
| align | "start" | "center" | "end" | "start" | Edge of the button the popover lines up with. |
| name | string | — | Submits the date with a form as YYYY-MM-DD. |
<DatePicker
label="Check-in"
format={{ weekday: "short", month: "long", day: "numeric" }}
min={new Date()}
isDateDisabled={(date) => booked.has(date.toDateString())}
/><form action={save}>
<DatePicker label="Start date" name="start" />
</form>