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 to the wrapped Calendar — default, weekNumbers, or dropdown. With variant="dropdown", the calendar caption switches to month and year <select> elements bounded by fromYear and toYear. Pass variant="dropdown" fromYear={1950} toYear={2030} and the dropdown lists eighty years without you constructing Date objects.

shadcn's recipe does not surface this directly — to switch its Calendar to dropdown captions you edit the recipe file, pass captionLayout="dropdown" plus startMonth={new Date(1950, 0)} and endMonth={new Date(2030, 11)} props through the block, and update the trigger to fit the wider caption row. For custom formatting, Drivn takes a formatDate function prop. shadcn relies on you importing format from date-fns and calling it inside the trigger Button. Same output, different surface — see the Date Picker docs for 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.