{"id":15783,"library":"react-dates","title":"React Dates","description":"React Dates is a robust and accessible date range picker component library for React, developed and maintained by Airbnb. It offers highly customizable single and range date pickers, including features like internationalization, mobile responsiveness, and full accessibility support. The current stable version is 21.8.0. The library relies on `moment` for all date handling, which is a significant architectural decision as `moment` is now in maintenance mode. Since v13.0.0, it mandates an explicit initialization import (`react-dates/initialize`) to set up its underlying `react-with-styles` styling solution, and it assumes `box-sizing: border-box` is globally applied for correct layout. Its release cadence has slowed, with the last npm publication over six years ago, suggesting it's in a maintenance phase rather than active feature development, though still widely used.","status":"maintenance","version":"21.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/airbnb/react-dates","tags":["javascript"],"install":[{"cmd":"npm install react-dates","lang":"bash","label":"npm"},{"cmd":"yarn add react-dates","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-dates","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime helper functions for Babel-transformed code, required for component functionality.","package":"@babel/runtime","optional":false},{"reason":"Core dependency for all date manipulation and formatting within the component. Essential for date logic.","package":"moment","optional":false},{"reason":"The fundamental UI library React Dates is built upon.","package":"react","optional":false},{"reason":"Provides the DOM-specific rendering methods for React components.","package":"react-dom","optional":false},{"reason":"Used for managing text direction (RTL/LTR) within components.","package":"react-with-direction","optional":false}],"imports":[{"note":"These are named exports for the primary picker components. Most applications will use `DateRangePicker` or `SingleDatePicker`.","wrong":"import DateRangePicker from 'react-dates'; // Incorrect: these are named exports","symbol":"DateRangePicker, SingleDatePicker, DayPickerRangeController","correct":"import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';"},{"note":"Required since v13.0.0 to configure styling with `react-with-styles`. This must be imported once at the top level of your application before any `react-dates` components are rendered.","wrong":"import { initialize } from 'react-dates/initialize'; // Incorrect: this is a side-effect import","symbol":"Initialize styling","correct":"import 'react-dates/initialize';"},{"note":"Imports the default stylesheet. Requires a CSS loader (e.g., Webpack's `css-loader`). This import should generally come before any custom override stylesheets.","symbol":"Default CSS styles","correct":"import 'react-dates/lib/css/_datepicker.css';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport 'react-dates/initialize';\nimport { DateRangePicker } from 'react-dates';\nimport 'react-dates/lib/css/_datepicker.css';\nimport moment from 'moment';\n\n// IMPORTANT: Ensure global box-sizing: border-box for correct layout.\n// Add this to your global CSS (e.g., index.css or App.css):\n/*\nhtml {\n  box-sizing: border-box;\n}\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n*/\n\nfunction MyDateRangePickerApp() {\n  const [startDate, setStartDate] = useState(null);\n  const [endDate, setEndDate] = useState(null);\n  const [focusedInput, setFocusedInput] = useState(null);\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>Book Your Stay</h1>\n      <p>Select your desired check-in and check-out dates.</p>\n      <DateRangePicker\n        startDate={startDate} // momentPropTypes.momentObj or null\n        startDateId=\"your_unique_start_date_id\"\n        endDate={endDate} // momentPropTypes.momentObj or null\n        endDateId=\"your_unique_end_date_id\"\n        onDatesChange={({ startDate, endDate }) => {\n          setStartDate(startDate);\n          setEndDate(endDate);\n        }}\n        focusedInput={focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null\n        onFocusChange={input => setFocusedInput(input)}\n        orientation=\"horizontal\"\n        numberOfMonths={2}\n        isOutsideRange={() => false} // Example: Allow all dates\n        minimumNights={0}\n        displayFormat=\"MM/DD/YYYY\"\n        hideKeyboardShortcutsPanel={true}\n      />\n      {startDate && endDate && (\n        <p>\n          Selected: {startDate.format('MM/DD/YYYY')} - {endDate.format('MM/DD/YYYY')}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport default MyDateRangePickerApp;\n","lang":"typescript","description":"This quickstart demonstrates the basic setup and usage of the `DateRangePicker` component from `react-dates`. It includes the necessary global initialization and CSS imports, manages date state using React hooks, and shows a functional date range selection example. It also includes comments on important global CSS settings and common props for the picker."},"warnings":[{"fix":"Add `import 'react-dates/initialize';` to your application's main entry file (e.g., `index.js` or `App.js`) before any other `react-dates` component imports.","message":"Since v13.0.0, `react-dates` requires an explicit `import 'react-dates/initialize';` statement at the top of your application's entry point. Failure to include this will result in unstyled components or runtime errors, as it sets up the necessary `react-with-styles` context.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Ensure your global CSS includes rules like `html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }` to apply `border-box` consistently.","message":"The component assumes that `box-sizing: border-box` is set globally in your page's CSS. Without this, the layout and sizing of the date picker elements may render incorrectly, leading to visual distortions or overflows.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install `moment` as a direct dependency (`npm install moment` or `yarn add moment`) alongside `react-dates`. Be aware of the long-term implications of relying on `moment` for new application development.","message":"`react-dates` has a critical peer dependency on `moment`. While `moment` is installed in most existing projects, its development ecosystem is in maintenance mode. New projects might prefer modern alternatives like `date-fns` or `luxon`, but `react-dates` is tightly coupled to `moment` and does not offer alternatives.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"In your component or application entry file, ensure `import 'react-dates/lib/css/_datepicker.css';` appears before `import './your-custom-styles.css';`.","message":"When overriding the default `react-dates` styles, the order of your CSS imports is crucial. Your custom stylesheet *must* be imported after `react-dates/lib/css/_datepicker.css` to ensure your overrides take precedence due to CSS specificity rules.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `import 'react-dates/initialize';` to the top of your application's main entry file (e.g., `index.js`).","cause":"The required `react-dates/initialize` side-effect import was omitted, preventing `react-with-styles` from correctly setting up component styles.","error":"TypeError: Cannot read properties of undefined (reading 'call') / Component does not render / Styles missing"},{"fix":"Ensure you have `import 'react-dates/lib/css/_datepicker.css';` in your component or main application file, and that your build setup correctly handles CSS imports.","cause":"The default `_datepicker.css` stylesheet was not imported or was imported incorrectly, leading to unstyled components.","error":"Date picker displays without any styling (plain HTML elements)"},{"fix":"Install `moment` using `npm install moment` or `yarn add moment`.","cause":"The `moment` library, a peer dependency of `react-dates`, has not been installed.","error":"Module not found: Can't resolve 'moment' in '...' during build or runtime"},{"fix":"Provide all required props to the `DateRangePicker` or `SingleDatePicker` component, ensuring unique `id`s for `startDateId` and `endDateId`.","cause":"Essential props like `startDateId`, `endDateId`, `focusedInput`, and handlers (`onDatesChange`, `onFocusChange`) are missing or incorrectly passed to `DateRangePicker` or `SingleDatePicker`.","error":"Warning: Failed prop type: The prop `startDateId` is marked as required in `DateRangePicker`, but its value is `undefined`."}],"ecosystem":"npm"}