Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
DateRangePicker, SingleDatePicker, DayPickerRangeController
✓ import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';
✗ import DateRangePicker from 'react-dates'; // Incorrect: these are named exports
These are named exports for the primary picker components. Most applications will use `DateRangePicker` or `SingleDatePicker`.
Initialize styling
✓ import 'react-dates/initialize';
✗ import { initialize } from 'react-dates/initialize'; // Incorrect: this is a side-effect import
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.
Default CSS styles
✓ import 'react-dates/lib/css/_datepicker.css';
Imports the default stylesheet. Requires a CSS loader (e.g., Webpack's `css-loader`). This import should generally come before any custom override stylesheets.
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.
import React, { useState } from 'react';
import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
import moment from 'moment';
// IMPORTANT: Ensure global box-sizing: border-box for correct layout.
// Add this to your global CSS (e.g., index.css or App.css):
/*
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
*/
function MyDateRangePickerApp() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [focusedInput, setFocusedInput] = useState(null);
return (
<div style={{ padding: '20px' }}>
<h1>Book Your Stay</h1>
<p>Select your desired check-in and check-out dates.</p>
<DateRangePicker
startDate={startDate} // momentPropTypes.momentObj or null
startDateId="your_unique_start_date_id"
endDate={endDate} // momentPropTypes.momentObj or null
endDateId="your_unique_end_date_id"
onDatesChange={({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
}}
focusedInput={focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null
onFocusChange={input => setFocusedInput(input)}
orientation="horizontal"
numberOfMonths={2}
isOutsideRange={() => false} // Example: Allow all dates
minimumNights={0}
displayFormat="MM/DD/YYYY"
hideKeyboardShortcutsPanel={true}
/>
{startDate && endDate && (
<p>
Selected: {startDate.format('MM/DD/YYYY')} - {endDate.format('MM/DD/YYYY')}
</p>
)}
</div>
);
}
export default MyDateRangePickerApp;
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'call') / Component does not render / Styles missing
The required `react-dates/initialize` side-effect import was omitted, preventing `react-with-styles` from correctly setting up component styles.
fixAdd `import 'react-dates/initialize';` to the top of your application's main entry file (e.g., `index.js`).
Date picker displays without any styling (plain HTML elements)
The default `_datepicker.css` stylesheet was not imported or was imported incorrectly, leading to unstyled components.
fixEnsure 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.
Module not found: Can't resolve 'moment' in '...' during build or runtime
The `moment` library, a peer dependency of `react-dates`, has not been installed.
fixInstall `moment` using `npm install moment` or `yarn add moment`.
Warning: Failed prop type: The prop `startDateId` is marked as required in `DateRangePicker`, but its value is `undefined`.
Essential props like `startDateId`, `endDateId`, `focusedInput`, and handlers (`onDatesChange`, `onFocusChange`) are missing or incorrectly passed to `DateRangePicker` or `SingleDatePicker`.
fixProvide all required props to the `DateRangePicker` or `SingleDatePicker` component, ensuring unique `id`s for `startDateId` and `endDateId`.
Audit
Dependencies
@babel/runtimerequiredRuntime helper functions for Babel-transformed code, required for component functionality.
momentrequiredCore dependency for all date manipulation and formatting within the component. Essential for date logic.
reactrequiredThe fundamental UI library React Dates is built upon.
react-domrequiredProvides the DOM-specific rendering methods for React components.
react-with-directionrequiredUsed for managing text direction (RTL/LTR) within components.