Drivn vs shadcn/ui — Date Picker Component Compared

shadcn/ui's date picker is a block recipe — copy these five components into your form file and wire them yourself. The Popover handles open state, the Button is the trigger, the Calendar lives inside PopoverContent, and you call format(date, 'PPP') from date-fns to render the selected day inside the button. Drivn collapses that into a single DatePicker import. The trigger is a plain <button> styled to match the Input component, with a CalendarDays icon on the left and the formatted date in the middle. Open state lives inside the component; outside-click and Escape dismiss the popover automatically.

Both approaches render the same calendar grid because they both wrap react-day-picker. The difference is what you write per form — with Drivn the call site stays one element and the format function is a prop, not an inline import.

The range variant mounts on the same DatePicker import as DatePicker.Range. The selected prop narrows to DateRange | undefined from react-day-picker, and the popover stays open until both from and to are set — clicking the same day twice does not collapse the range. The trigger label formats as Apr 1 – Apr 7 using the shared formatter, with the en dash inserted by formatRangeLabel inside the component.

shadcn's published recipe for range selection is a separate block file that copies the single-date recipe and changes mode from single to range. You end up with two near-identical files in the components directory — date-picker.tsx and date-picker-range.tsx — each duplicating the same Popover-Button-Calendar plumbing. Drivn keeps both behind a single dot-notation API, and the Calendar source the two share lives once in your repo.

Drivn's DatePicker forwards a variant prop straight through to the Calendar it wraps, and the variant map has exactly three entries: default, weekNumbers, and dropdown. Choosing dropdown sets react-day-picker's captionLayout to 'dropdown' and derives the month range from two plain numbers — internally startMonth: new Date(fromYear, 0) and endMonth: new Date(toYear, 11). The defaults are currentYear - 20 and currentYear + 20, which already covers most scheduling forms with no configuration at all. The native <select> elements render at opacity-0 layered over the visible caption label, so the control reads as text but opens the platform picker on tap.

shadcn does not expose that shortcut. Switching its recipe to dropdown captions means editing the copied file: pass captionLayout="dropdown", hand-build startMonth={new Date(1950, 0)} and endMonth={new Date(2030, 11)}, then widen the trigger to fit the taller caption row. Formatting splits the same way — Drivn takes a formatDate function prop that feeds both the single-date trigger label and the range label, while shadcn expects you to import format from date-fns and call it inline inside the Button. The Date Picker docs list every prop.

Both libraries pass locale objects from react-day-picker/locale straight through to the underlying DayPicker. Drivn forwards the locale prop through DatePicker into Calendar so the trigger label, weekday headers, month names, and first-day-of-week all update in one prop. Import cs from react-day-picker/locale and pass it in — no provider needed.

shadcn's recipe accepts the locale on the inner <Calendar locale={...} /> only — the trigger Button label still calls format(date, 'PPP') from date-fns, so localizing the trigger means swapping date-fns to format(date, 'PPP', { locale: cs }) from date-fns/locale. Drivn passes one prop and the trigger label, calendar caption, and weekday row update together, because the same formatDate and locale props feed both surfaces. The Calendar comparison covers every other locale trade-off they share.