React Date and Time Pickers — Calendar, Date, Time
Date and time components for React — Calendar, Date Picker, Time Picker with range selection, week numbers, and keyboard navigation. Zero runtime deps.
Date pickers are one of the hardest UI surfaces to get right. You need keyboard navigation, range selection, localization, month-year dropdowns, week numbers, and a mobile-friendly native fallback. Most libraries solve this with a large date utility package and a primitives wrapper. Drivn ships a focused set of date-family components that cover the common cases without a heavy dependency on day.js, date-fns, or Moment.
The Drivn calendar renders a month grid with single-date and range selection plus optional week numbers. The date-picker pairs a text input with a dropdown calendar. The time-picker provides scrollable hour, minute, and second columns with a native input fallback on mobile. Each component is standalone — install only what you need. The time-picker defers to the native <input type="time"> on touch devices to avoid awkward scroll ergonomics on mobile, while keeping the styled scrollable columns on desktop.
Which component fits your form
Use the calendar directly when the date surface is the whole UI — a booking page, an availability selector, a report date range. Use date-picker when you need a date field inside a larger form; it combines the calendar with a typed input for keyboard-first users. Use time-picker for standalone time fields; it scrolls for quick selection but falls back to native <input type="time"> on mobile for ergonomics.
For date-time combined entry (meeting start, event creation), render a DatePicker and a TimePicker side by side with matching labels. There is no "date-time picker" component because the two are rarely needed together, and decoupling them keeps each smaller.
Range selection
The Calendar supports mode="range" out of the box with visual indicators for the start, middle, and end of a range. Use this for trip dates, report windows, and filters. The range is controlled via value and onChange — the shape is { from: Date; to?: Date } and either half can be undefined during selection.
For a two-input range UI (e.g., "From" and "To" fields), render two DatePickers with linked state. Range mode on a single calendar works best for surfaces where the user visually selects two endpoints; the two-input pattern works better inside dense forms.
Install
Install any of the date-family components one at a time. Each pulls in only the primitives it needs; none of them ships a heavy date utility — the components use the native Date object and Intl.DateTimeFormat for formatting. That keeps the installed surface small and locale-aware without shipping Moment, day.js, or date-fns into your bundle. Check the theming guide for customizing the calendar accent and range colors.
1 npx drivn add calendar 2 npx drivn add date-picker 3 npx drivn add time-picker
Install Drivn in one command
Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.
npx drivn@latest createRequires Node 18+. Works with npm, pnpm, and yarn.