Next.js Date Picker for the App Router

Drivn installs through a small CLI that writes the component source directly into your repository — there is no runtime npm package to version-lock. From the root of your Next.js 16 project run npx drivn add date-picker. Because the Date Picker imports the Calendar, the CLI pulls that file in too, and adds the two underlying dependencies — react-day-picker for the grid and lucide-react for the trigger icon — to your package.json if they are missing. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own both files; future Drivn releases will not overwrite them. Commit the change for a clean baseline before customizing.

An App Router page is a server component by default, so it cannot call useState. The Date Picker is marked 'use client' at the top of its source because it tracks open state and the selected date with hooks. The clean pattern is to keep the picker and its state inside a small client component, then render that island in an otherwise server-rendered page. Import it from @/components/ui/date-picker, hold the date in useState, and bind selected and onSelect. No dynamic() import and no SSR-disable flag are needed — Next.js inserts the client boundary at the import. The installation guide covers project setup.

Unlike most date inputs, the Drivn picker does not pull in a popover primitive. The trigger is a plain <button> and the calendar sits in an absolutely positioned panel directly beneath it. Opening and closing is handled by two effects in the source: one listens for a mousedown outside the component ref and closes the panel, the other closes it on the Escape key. The panel animates with a transition-[opacity,scale] and toggles pointer-events-none while hidden, so it never intercepts clicks when closed. The relevant slice of the styles object is below, copied from date-picker.tsx — edit these classes to reposition or restyle the panel.

By default the trigger shows the selected date formatted with toLocaleDateString as a short month, numeric day, and year — Jun 14, 2026. To match a different convention, pass a formatDate function that receives the Date and returns the string you want in the trigger. This is a pure formatting hook; it does not change the value stored in state, only the label. The same function applies to both endpoints in range mode. Pair it with the placeholder prop to set the text shown before any date is chosen. See the Date Picker docs for the full prop table.

For check-in/check-out and report-window inputs, use the DatePicker.Range sub-component — it is attached to the root via Object.assign in the source, so one import gives you both modes. Range mode holds a { from, to } value; import the DateRange type to type your state. For single-date pickers where users jump across years — a date of birth field, say — pass variant="dropdown" to swap the calendar caption for month and year <select> menus, and bound them with fromYear and toYear. The picker also forwards a locale prop straight to react-day-picker, so importing a locale from react-day-picker/locale re-labels the grid. See Drivn vs shadcn/ui Date Picker for how this compares.