react-date-range

react-date-range gives React apps a calendar and date-range picker that supports single dates, multiple ranges, and drag-and-drop selection out of the box. It renders as native components (Calendar, DateRange, DateRangePicker, DefinedRange) that operate on plain JS Date objects, so state stays stateless and easy to serialize or persist.

All date math is delegated to date-fns as a peer dependency, which keeps the library’s own bundle small and lets consuming projects control locale packs, formatting, and version pinning. Configurable min/max bounds, disabled-date predicates, static/input preset ranges, and per-range colors cover most booking, filtering, and reporting UI needs without custom calendar code.

The project has been explicitly marked unmaintained by its original authors since 2024 — it still receives community forks and is widely used in production, but no new features or fixes are expected from the upstream repo.

What You Get

• Calendar component for single-date selection with keyboard and drag support
• DateRange and DateRangePicker components for selecting one or more date ranges
• DefinedRange component exposing configurable preset ranges (Today, Last 7 Days, This Month, etc.)
• Infinite-scroll calendar mode for continuously browsing months
• Locale support via any date-fns locale, with editable date inputs and ARIA label hooks for accessibility

Common Use Cases

• Booking and reservation forms that need a start/end date range picker
• Analytics or reporting dashboards with a ‘Today / Last 7 days / This month’ preset filter bar
• Admin panels needing a plain calendar widget for scheduling a single date
• Multi-range selection UIs, such as pricing calendars with different colored ranges per rule

Under The Hood

Architecture The library is organized as a small tree of composable class components under src/components/: Calendar (620 lines) is the core month-rendering and navigation engine, DateRange wraps it with range-selection state (focusedRange, preview) and delegates day-by-day comparisons to date-fns, DateRangePicker composes DateRange with DefinedRange for a picker-plus-presets layout, and DayCell/Month/DateInput/InputRangeField handle individual rendering concerns. State flows top-down as props (ranges, focusedRange, callbacks) with controlled-component semantics — the consumer owns the selected dates and re-renders the calendar via new props, so there is no internal Redux-like store to reason about. Changing the core Calendar day-grid logic would ripple into every other component since DateRange, DefinedRange, and DateRangePicker all render it internally.

Tech Stack Built as a plain React component library (peer dependency on React 0.14–19-era ranges) with date-fns 3.x as the other peer dependency for all date math, classnames for conditional class composition, prop-types for runtime prop validation, react-list for virtualized list rendering in scroll mode, and shallow-equal for cheap prop diffing. Styling is authored in SCSS (src/styles.scss, src/theme/*.scss) and compiled with PostCSS/autoprefixer at build time; the package itself is transpiled with Babel (@babel/preset-env, @babel/preset-react) rather than bundled with a module bundler, so consumers import compiled CommonJS from dist/. A react-styleguidist config and demo/ folder provide a docs/demo site built separately.

Code Quality Tests exist for four of the eight components (Calendar, DateRange, DefinedRange, InputRangeField) using Jest with Enzyme (enzyme-adapter-react-16) and snapshot serialization via enzyme-to-json; the remaining components (Month, DayCell, DateInput, DateRangePicker) have no dedicated tests. ESLint is configured with eslint:recommended and plugin:react/recommended plus Prettier integration, and GitHub Actions run a tests.yml workflow and a CodeQL security-analysis workflow on every push. Components use PropTypes for prop validation rather than TypeScript, so type errors surface at runtime in development builds rather than at compile time. Naming and file layout are consistent (one directory per component, index.js + index.test.js + snapshot folder).

What Makes It Unique Unlike many date-picker libraries that bundle their own date-manipulation code, react-date-range treats date math as a true peer dependency on date-fns, so projects that already use date-fns elsewhere avoid a second date library in their bundle. Its multi-range model (an array of {startDate, endDate, key, color} objects rather than a single range) and drag-and-drop day selection are less common combinations, and the DefinedRange/createStaticRanges API for declaring reusable named presets is a distinctive, config-first way to expose “Last 7 Days”-style filters without hand-rolling the date math in application code.