Date Picker
NEWA date picker (and date range picker) whose popover pops from the trigger edge with a spring, flips above when there is no room below, lands the selection pill, then closes and hands focus back to the trigger.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/date-picker
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | DateRange | undefined | Controlled selected value |
| defaultValue | Date | null | DateRange | null | Initial value (uncontrolled) |
| onChange | (date: Date | null) => void | (range: DateRange) => void | undefined | Selection change callback |
| placeholder | string | 'Pick a date' / 'Pick a range' | Trigger placeholder text |
| align | 'start' | 'end' | 'start' | Popover alignment relative to the trigger |
| side | 'bottom' | 'top' | 'auto' | 'auto' | Popover placement; 'auto' opens downward on mobile and flips on desktop when tight |
| disabled | boolean | false | Disables the trigger |
| className | string | undefined | Additional class for the wrapper (set width, e.g. w-80) |