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 entry is deceptively deep. A field that looks like a single input hides keyboard navigation, range selection, month and year jumping, locale-aware weekday order, week numbers, and a mobile story that does not fight the user's thumb. Most React libraries answer this by leaning on a date utility package like date-fns or day.js plus a headless primitives wrapper, which pulls weight into your bundle for behavior you could own outright.
Drivn takes the opposite route. The calendar renders a month grid with single-date and range modes plus optional ISO week numbers. The date-picker pairs a typed input with that same calendar in a dropdown, so keyboard-first users never have to reach for the mouse. The time-picker gives you scrollable hour, minute, and second columns on desktop and steps aside for the native <input type="time"> on touch devices. Every one of them formats through the platform's own Intl.DateTimeFormat and reads from the native Date object — no Moment, no day.js, no date-fns shipped to the client. Install only the piece your form needs; each is one file copied into your project, fully typed, and yours to edit.
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
Range selection lives on the Calendar via mode="range", which paints distinct start, middle, and end states across the grid so the selected window reads at a glance. It is controlled through value and onChange, and the value is a plain { from: Date; to?: Date } object — to stays undefined while the user is mid-selection, so you can render partial ranges without special-casing. Reach for this on surfaces where the two endpoints are chosen visually: trip dates, report windows, availability filters.
When the range lives inside a dense form, prefer two linked date-picker fields labelled "From" and "To" over a single range calendar. The two-input pattern keeps each field compact and lets users type either bound directly, while single-calendar range mode wins whenever the calendar is the primary UI on the page.
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.