Forms
Navigation & layout
Data display & feedback
Date & time
Browse components
← All components
Date Picker
Popover date picker that combines Button, Calendar, and Popover.
Install
npx shadcn@latest add https://ui.anuragroy.dev/r/date-picker.jsonPreview
Loading preview…
Installation
Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.
Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/date-picker.jsonGitHub fallback if the website is down:
Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/date-picker.jsonUsage
Import paths follow your components.json aliases. After install, the default path is @/components/ui/date-picker.
Import
import { DatePicker } from "@/components/ui/date-picker"example.tsx
import { DatePicker } from "@/components/ui/date-picker"export function Example() { return <DatePicker />}API Reference
DatePicker
| Prop | Type | Default |
|---|---|---|
| value | Date | — |
| defaultValue | Date | — |
| onValueChange | (date: Date | undefined) => void | — |
| placeholder | string | "Pick a date" |
| disabled | boolean | — |
| dateFormat | string | "PPP" |
- dateFormat — date-fns format string.