Date Picker

Collapsible date field with the shared Calendar panel and spring open motion.

Installation

npx shadcn@latest add @iconiq/date-picker

Collapsible date field with a formatted trigger button and the shared Iconiq Calendar panel underneath.

valueDate | null

Controlled selected date. When provided, the trigger and embedded Calendar both reflect this value.

placeholderstring

Default Select a date

Copy shown in the trigger when no date is selected.

onChange(date: Date) => void

Called when the user picks a date from the embedded Calendar.

classNamestring

Optional class names applied to the outer wrapper.

defaultOpenboolean

Default false

Whether the Calendar panel starts expanded on first render.

calendarPropsOmit<CalendarProps, 'selected' | 'defaultSelected' | 'onSelect' | 'month' | 'onMonthChange'>

Props forwarded to the embedded Calendar, such as size, locale, disabled, weekStartsOn, minYear, and maxYear.

Also exported as `AnimatedDatePicker` for backwards compatibility.

The trigger formats the selected date as `EEE, MMM d, yyyy` and toggles the panel open and closed.

Choosing a date closes the panel automatically while keeping the visible month aligned with the selected value.

Click outside or press Escape to close the panel. The embedded Calendar stays mounted after the first open to avoid repeat entrance motion.

Install the `calendar` registry entry alongside `date-picker` so `@/components/ui/calendar` resolves in consumer apps.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react, date-fns.

Registry dependency: calendar. Install date-picker together with the shared Calendar component.

The generated registry file is /r/date-picker.json.