React DayPicker is a highly customizable and accessible date picker component for React applications, currently at version 9.14.0. It offers extensive features for single, multiple, and range date selections, along with advanced localization capabilities supporting various calendar systems including ISO 8601, Persian, Hijri, Buddhist, Ethiopic, and Hebrew. The library is actively maintained with frequent minor and patch releases, indicating ongoing development and improvements. Key differentiators include its focus on accessibility (WCAG 2.1 AA compliant), flexible styling with CSS, robust timezone handling, and a modular architecture that allows for custom components and extensions. It ships with TypeScript types and is compiled to both CommonJS and ESM, making it suitable for modern React projects.
npm install react-day-pickerVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates a basic single-date selection DayPicker component with localization, year/month dropdowns, a footer displaying the selected date, and custom styling. It shows how to import the component, its styles, and a locale, and manage the selected state using React hooks.
Update custom CSS classes and snapshot tests to reflect the new markup and class names. Refer to the v9 upgrade guide for a full list of renamed classes and components.
Remove the `labels` prop when using a built-in locale, as it now includes default translations. Only use `labels` for custom translations or non-standard locales.
Migrate from `DayPickerInput` by implementing a custom input field that manages the date state and interacts with `DayPicker` via its `selected` and `onSelect` props. Refer to the 'Input Fields Guide' in the documentation.
Consult the v8 upgrade guide and update all changed prop names in your `DayPicker` components.
Install `date-fns` as a dependency: `npm install date-fns` or `yarn add date-fns`. If you were not using `date-fns` directly, you might have removed it in previous upgrades, so ensure it's present.
If you desire to start a new range when a full range is already selected in range mode, add the `resetOnSelect` prop to your `DayPicker` component: `<DayPicker mode="range" resetOnSelect />`.
Ensure you are using ES Module imports: `import { DayPicker } from 'react-day-picker';`. If server-side rendering with CommonJS, ensure your build setup correctly handles ESM or use a dynamic `import()` statement if supported by your runtime. While `react-day-picker` compiles to CommonJS, ES module imports are the recommended modern approach.Ensure you have `import 'react-day-picker/dist/style.css';` in your entry file or a relevant component. If upgrading from v7, note the path changed from `lib/style.css` to `dist/style.css`. Review custom CSS for conflicts.
Implement a ref on your custom input and explicitly call `focus()` on the input's ref within the `onSelect` handler, potentially after updating the state. Pass the ref correctly to the underlying input element.
When using the `selected` prop, always pair it with an `onSelect` prop to manage the state. For example: `const [selected, setSelected] = useState<Date>(); return <DayPicker selected={selected} onSelect={setSelected} />`.