react-datetime-picker

React-DateTime-Picker gives React apps a datetime input built from a segmented native-style text field plus optional calendar and clock popups for point-and-click selection. It supports virtually any locale out of the box using the Intl API, so there is no moment.js or other heavyweight date library to bundle. The component accepts and emits plain JavaScript Date objects (or ISO strings), and every visible sub-element — the calendar toggle, clear button, and each date/time segment — can be swapped, hidden, or relabeled via props.

Under the hood it composes two sibling projects from the same author, React-Calendar and React-Clock, behind a single controlled/uncontrolled API, using react-fit to keep the popup widgets positioned correctly regardless of where the input sits in the page. Extensive aria-label props and a native <input type="datetime-local"> fallback path make it a practical choice when accessibility and internationalization matter more than a fully custom-styled widget.

What You Get

• A <DateTimePicker /> component accepting Date objects, ISO strings, or ranges as value
• Built-in calendar and clock popups powered by the companion React-Calendar and React-Clock packages
• Locale-aware segment formatting (day/month/year/hour/minute/second order) via the Intl API, no moment.js needed
• Fine-grained control over which fields render, their aria-labels, icons, and placeholders
• shouldOpenWidgets/shouldCloseWidgets callbacks for custom open/close behavior
• Portal-based rendering via react-fit so popups stay positioned correctly in scrollable or constrained layouts

Common Use Cases

• Scheduling forms (appointments, bookings, event creation) that need both a date and a precise time
• Admin dashboards and CRUD forms where a single field must capture a full timestamp
• Internationalized products that need locale-correct date/time ordering without shipping a large i18n date library
• Forms that need to fall back to a native accessible input while still offering a richer picker for supporting browsers
• Any React app already using React-Calendar or React-Clock that wants a combined widget with a consistent API

Under The Hood

Architecture The published package is one workspace (packages/react-datetime-picker) inside a Yarn workspaces monorepo. DateTimePicker.tsx is the top-level component: it owns open/closed state for the calendar and clock popups independently, wires mousedown/focusin/touchstart listeners to detect outside clicks and close widgets, and renders DateTimeInput (the segmented text field) alongside portal-rendered Calendar and Clock instances positioned with react-fit. DateTimeInput.tsx in turn manages each date/time segment as its own controlled input, delegating native browser support detection and a <input type="datetime-local"> fallback to a nested NativeInput component. Shared formatting and clamping logic (locale-aware AM/PM detection, between() value clamping) lives in src/shared/, keeping the two visual components thin. Removing either React-Calendar or React-Clock would only take away the corresponding popup — the segmented text input and native fallback path work independently.

Tech Stack TypeScript throughout, targeting React 16.8+ through 19 as peer dependencies, built with tsc against tsconfig.build.json and packaged via prepack. It depends on the author’s own react-calendar, react-clock, react-date-picker, and react-time-picker packages plus @wojtekmaj/date-utils, clsx for class composition, get-user-locale for locale detection, and make-event-props for forwarding native DOM event handlers. Styles ship as a separate CSS file copied into dist via cpy-cli rather than CSS-in-JS. The workspace uses Yarn 4 (packageManager: yarn@4.17.1), Biome for linting/formatting, and Husky for git hooks.

Code Quality Each core module (DateTimePicker.tsx, DateTimeInput.tsx, NativeInput.tsx, and the shared date/format/utils helpers) has a co-located .spec.tsx/.spec.ts file, run with Vitest; UI specs use vitest-browser-react and @vitest/browser-playwright to execute in a real browser rather than a DOM shim, which is a meaningfully stronger testing approach than jsdom-only setups. Biome enforces linting and formatting across the monorepo, and the package’s own test script chains lint, tsc, format-check, and unit tests together. TypeScript types are exported alongside the component (DateTimePickerProps), and CI runs on GitHub Actions.

What Makes It Unique Rather than reimplementing calendar and clock UI from scratch, it composes two sibling libraries by the same maintainer behind one API, which keeps each concern (date grid, time dial, segmented text entry) independently testable and reusable — the README explicitly points users toward the underlying React-Calendar and React-Clock packages if they only need one piece. Its documentation also actively steers consumers toward the native <input type="datetime-local"> when advanced features aren’t needed, an unusually candid stance for a component library toward not using its own product.