react-datepicker

react-datepicker is a widely used React component for selecting dates and date ranges, offering a drop-in <DatePicker /> that pairs a text input with a floating calendar popover. Built and maintained by HackerOne since 2014, it has grown into one of the standard choices for date input in the React ecosystem, with over 8,300 GitHub stars and more than 5 million weekly npm downloads.

The library ships fully typed with TypeScript, uses date-fns instead of moment.js for date manipulation (since v2), and covers a broad surface of date-picking scenarios out of the box: single dates, date ranges, multiple date selection, month/quarter/year pickers, time selection with configurable intervals, inline and portal rendering, keyboard navigation, and screen-reader-friendly ARIA markup. Positioning is handled by Floating UI, and locales are pluggable via date-fns’s internationalization data, making it straightforward to localize the calendar for a global user base.

What You Get

• A drop-in <DatePicker /> component with a floating calendar popover positioned via Floating UI
• Built-in support for single dates, date ranges, multiple dates, and month/quarter/year pickers
• An integrated time picker with configurable intervals, mergeable into the same calendar
• Locale support powered by date-fns, with registerLocale/setDefaultLocale helpers for i18n
• Full TypeScript type definitions and ARIA-compliant keyboard navigation out of the box

Common Use Cases

• Booking and reservation forms that need a constrained date range picker
• Filtering dashboards or reports by a custom date range
• Scheduling UIs that combine date and time selection in one control
• Profile or checkout forms collecting a single birthdate or delivery date

Under The Hood

Architecture The root DatePicker component (src/index.tsx, ~2,000 lines, class-based) composes PopperComponent for positioning, which is wrapped by a withFloating higher-order component for Floating UI integration, an optional Portal for overflow rendering, and a TabLoop wrapper for keyboard focus trapping, which in turn renders the core Calendar component (src/calendar.tsx, ~1,300 lines) that composes Month, Year, Time, and dropdown subcomponents. Data flows top-down through props and callbacks, with DatePicker owning most controlled state (open/selected/preSelection) and delegating rendering to Calendar. Every component routes date manipulation through a single date_utils.ts module (~1,800 lines) that wraps date-fns, centralizing date math but making that file load-bearing for the whole component tree.

Tech Stack Written in TypeScript with strict and strictNullChecks enabled, targeting React 16 through 19 as peer dependencies. Positioning uses @floating-ui/react, className composition uses clsx, and all date math goes through date-fns v4 (replacing moment.js as of v2, per the README), with optional date-fns-tz for timezone conversion. The build pipeline uses Rollup with Babel and TypeScript plugins to emit UMD, CommonJS, and ES module bundles plus type declarations, and Sass compiles the stylesheets into both plain CSS and CSS Modules variants. A separate Vite-based docs site lives in docs-site/, linked to the main package via a Yarn portal dependency. CI runs on GitHub Actions with Node 24 and Yarn 4 via Corepack.

Code Quality The src/test/ directory holds 43 Jest test files covering calendar logic, dropdowns, exclusion/inclusion date filters, custom components, and portal rendering, using @testing-library/react and @testing-library/user-event, plus a dedicated axe.test.tsx that runs jest-axe for accessibility regressions. TypeScript strict mode is enforced project-wide, ESLint 9 with typescript-eslint and eslint-plugin-react-hooks enforces linting rules, Stylelint covers the SCSS stylesheets, and Prettier plus Husky/lint-staged enforce formatting on every commit. CI runs the full suite alongside CodeQL static analysis, making this one of the more rigorously tested and typed packages of its kind.

API Design The public surface is a single <DatePicker /> component with an extensive, well-documented prop set (see docs/datepicker.md) covering single/range/multi-date modes, time selection, locale registration, and render props (renderCustomHeader, renderDayContents) that allow full UI takeover without forking the component. Getting started requires minimal boilerplate — import the component and its stylesheet, pass selected/onChange — though the breadth of the prop surface means combining advanced modes (range plus time plus custom headers) carries a real learning curve. Naming is consistent throughout (onChange, onSelect, minDate/maxDate, excludeDates), and every prop is documented individually.