Date Picker
Date picker and standalone calendar with keyboard navigation, locales and disabled dates.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
CalendarProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onSelect" | "defaultValue">
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | — | — |
| defaultValue | Date | null | null | — |
| onSelect | (date: Date) => void | — | — |
| weekStartsOn | 0 | 1 | 1 | 0 = Sunday, 1 = Monday |
| locale | string | "en-US" | BCP 47 locale for month and weekday names |
| disablePast | boolean | false | Days before today can't be picked |
| isDateDisabled | (date: Date) => boolean | — | — |
DatePickerProps
Also accepts all props of Omit<CalendarProps, "onSelect" | "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange | (date: Date) => void | — | — |
| placeholder | string | "Pick a date" | — |
| defaultOpen | boolean | false | Opens on first render without moving focus, handy for previews |
Install
$ npx shadcn@latest add https://chromotion.dev/r/date-picker.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.