{"id":11681,"library":"react-date-range","title":"React Date and Date Range Picker","description":"react-date-range is a React component library designed for selecting single dates or date ranges, offering a highly configurable and stateless approach to date management. As of version 2.0.1, it leverages `date-fns` for underlying date operations, requiring it as a peer dependency (minimum `date-fns` v2.0.0-alpha.1). It features multiple range selection, drag-and-drop capabilities, and keyboard navigation, using native JavaScript Date objects for all inputs and outputs. While previously actively maintained, the project's maintainers have stated it is currently unmaintained and will not be updated in the foreseeable future, making its release cadence effectively paused. Key differentiators include its flexibility, emphasis on native Date objects, and `date-fns` agnosticism (via peer dependency) over deprecated libraries like Moment.js.","status":"abandoned","version":"2.0.1","language":"javascript","source_language":"en","source_url":"http://github.com/hypeserver/react-date-range","tags":["javascript","react","date","range","datepicker","rangepicker"],"install":[{"cmd":"npm install react-date-range","lang":"bash","label":"npm"},{"cmd":"yarn add react-date-range","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-date-range","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for all React component functionality.","package":"react","optional":false},{"reason":"Required as a peer dependency for all underlying date operations; allows projects to manage their own date-fns version. Requires >=2.0.0-alpha.1.","package":"date-fns","optional":false}],"imports":[{"note":"Primarily used for single date selection. Ensure you import the named export.","wrong":"const Calendar = require('react-date-range').Calendar;","symbol":"Calendar","correct":"import { Calendar } from 'react-date-range';"},{"note":"This is the primary component for selecting date ranges. Older versions might have different subpath imports, but named export from root is standard since v1.","wrong":"import DateRangePicker from 'react-date-range/lib/DateRangePicker';","symbol":"DateRangePicker","correct":"import { DateRangePicker } from 'react-date-range';"},{"note":"Similar to DateRangePicker but for simplified range selection, often used internally or when finer control over range rendering is needed. Named export.","wrong":"require('react-date-range').DateRange;","symbol":"DateRange","correct":"import { DateRange } from 'react-date-range';"},{"note":"Essential CSS files must be imported to properly display the components. 'styles.css' provides the core layout, and a theme like 'default.css' provides visual styling.","symbol":"Styles","correct":"import 'react-date-range/dist/styles.css';\nimport 'react-date-range/dist/theme/default.css';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { DateRangePicker } from 'react-date-range';\nimport 'react-date-range/dist/styles.css'; // main style file\nimport 'react-date-range/dist/theme/default.css'; // theme css file\n\nfunction MyDateRangePicker() {\n  const [state, setState] = useState([\n    {\n      startDate: new Date(),\n      endDate: null,\n      key: 'selection'\n    }\n  ]);\n\n  const handleSelect = (ranges) => {\n    setState([ranges.selection]);\n    console.log('Selected range:', ranges.selection);\n    // You would typically update your application state here\n    // e.g., send ranges.selection.startDate and ranges.selection.endDate to a parent component or API\n  };\n\n  return (\n    <div>\n      <h2 style={{ marginBottom: '15px' }}>Select a Date Range</h2>\n      <DateRangePicker\n        ranges={state}\n        onChange={handleSelect}\n        showSelectionPreview={true}\n        moveRangeOnFirstSelection={false}\n        months={2} // Display two months\n        direction=\"horizontal\"\n      />\n    </div>\n  );\n}\n\n// To use this component in a React app, you'd typically render it:\n// import { createRoot } from 'react-dom/client';\n// const container = document.getElementById('root');\n// const root = createRoot(container);\n// root.render(<MyDateRangePicker />);","lang":"javascript","description":"This quickstart demonstrates how to set up a `DateRangePicker` component with initial state using React hooks, handling selection changes, and importing the necessary styles. It displays two months horizontally and logs the selected date range to the console."},"warnings":[{"fix":"Upgrade `date-fns` to version `^2.0.0` or higher in your project. If an upgrade is not possible, refer to the `date-fns` v2 migration guide and `react-date-range` documentation for compatibility props like `dateDisplayFormat`.","message":"`date-fns` is now a peer dependency requiring version `>=2.0.0-alpha.1`. Using older `date-fns` versions (pre-v2) will cause issues, particularly with unicode tokens in `date-fns` format strings, unless specific compatibility props are passed.","severity":"breaking","affected_versions":">=1.0.1"},{"fix":"Refactor your components to pass `Date` objects for date props and handle changes via `onChange` callbacks. Remove any reliance on `moment.js` for date operations directly involving `react-date-range`.","message":"`Calendar` and `DateRange` components became fully controlled, meaning they now require explicit `date` or `ranges` props and `onChange` handlers. Additionally, input and output values are strictly native `Date` objects, and `moment.js` is no longer used or bundled out-of-the-box.","severity":"breaking","affected_versions":">=1.0.0-alpha0"},{"fix":"Exercise caution when adopting for new projects. For existing projects, consider forking the repository to self-maintain or evaluate alternative actively maintained date picker libraries.","message":"The project is officially unmaintained by its current owners, meaning no new features, bug fixes, or security patches are expected in the foreseeable future. This significantly increases the risk for long-term production use.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Consult the `LICENSE` file in the package repository or distribution for the most up-to-date licensing information and ensure it aligns with your organizational policies.","message":"The project's license changed in 2020 and ownership was transferred to Hypeserver due to Adphorus being acquired. Review the updated license terms to ensure compliance for your use case.","severity":"gotcha","affected_versions":">=1.1.4"},{"fix":"Ensure you are using `react-date-range` version `1.1.4` or higher to avoid these installation and dependency resolution problems.","message":"Versions prior to `1.1.4` (specifically `1.1.3`) had known issues with installing third-party dependencies and handling `date-fns` as a peer dependency.","severity":"gotcha","affected_versions":"<1.1.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade `date-fns` to version `^2.0.0` or higher in your project's `package.json`. If an upgrade is not feasible, explicitly provide `dateDisplayFormat` and other format-related props that are compatible with your specific `date-fns` v1.x version.","cause":"Using `react-date-range` with a `date-fns` version older than 2.0.0 (e.g., v1.x) without providing specific format props compatible with the older `date-fns` API, after `react-date-range` adopted `date-fns` v2+ compatibility.","error":"TypeError: date_fns__WEBPACK_IMPORTED_MODULE_2__.format is not a function"},{"fix":"`react-date-range` no longer bundles or depends on `moment.js` since `v1.0.0-alpha0`. All date inputs and outputs are native `Date` objects. Refactor your code to use native `Date` objects or `date-fns` directly for date manipulations.","cause":"Your application code relies on `moment.js` being implicitly available or used internally by `react-date-range` after the `v1.0.0-alpha0` breaking change, which removed `moment.js` dependency.","error":"ReferenceError: moment is not defined"},{"fix":"Ensure all `Date` objects passed to `react-date-range` components are valid instances. Always validate date inputs from external sources before passing them to the component, for example, by checking `!isNaN(newDate.getTime())`.","cause":"An invalid `Date` object (e.g., `new Date(null)`, `new Date('invalid-string')`, or a `null`/`undefined` value) is passed to a `date` or `ranges` prop of `Calendar` or `DateRangePicker`, causing `date-fns` to fail during date operations.","error":"RangeError: Invalid time value"}],"ecosystem":"npm"}