How do I install the date picker?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Is there a time picker too?

Yes. The Time Picker is its sibling and uses the same popover and button.

Pro

A shadcn Popover and Button wrapping the animated calendar. Picking a day closes the popover.

pnpm dlx shadcn@latest add @ditherui/date-picker

PropTypeDefault

todayDate—

valueDateundefined

defaultValueDateundefined

onValueChange(date: Date) => void—

placeholderstringPick a date

classNamestring—

openboolean—

defaultOpenbooleanfalse

onOpenChange(open: boolean) => void—

Use the date picker for choosing a day from a popover. It wraps the animated calendar in a shadcn Popover and Button.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.