Date Picker

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

Open the trigger to pick a date from the shared Calendar panel.

Installation

npx shadcn@latest add @iconiq/date-picker

6 props

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

DefaultSelect 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

Defaultfalse

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.

Notes

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.