{"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.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-dates"],"cli":null},"imports":["import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';","import 'react-dates/initialize';","import 'react-dates/lib/css/_datepicker.css';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}