{"id":11683,"library":"react-day-picker","title":"React DayPicker","description":"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.","status":"active","version":"9.14.0","language":"javascript","source_language":"en","source_url":"https://github.com/gpbl/react-day-picker","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-day-picker","lang":"bash","label":"npm"},{"cmd":"yarn add react-day-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-day-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for date manipulation and formatting. Required for full functionality.","package":"date-fns","optional":false}],"imports":[{"note":"Primary component import. For CommonJS, `require('react-day-picker')` directly is typically fine in modern Node.js environments, but `import` is preferred for ESM.","wrong":"const DayPicker = require('react-day-picker');","symbol":"DayPicker","correct":"import { DayPicker } from 'react-day-picker';"},{"note":"CSS styles must be imported separately. The path changed from `lib/style.css` to `dist/style.css` in v8.","wrong":"import 'react-day-picker/lib/style.css';","symbol":"styles","correct":"import 'react-day-picker/dist/style.css';"},{"note":"Locales are imported from the `/locale` subpath since v9.12.0 and now include translated labels by default.","wrong":"import { es } from 'react-day-picker';","symbol":"es (locale)","correct":"import { es } from 'react-day-picker/locale';"},{"note":"Specialized calendar systems (like Hijri, Buddhist, Ethiopic, Persian, Hebrew) are imported from their respective subpaths.","symbol":"DayPicker (Hijri calendar)","correct":"import { DayPicker } from 'react-day-picker/hijri';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { enUS } from 'react-day-picker/locale';\nimport 'react-day-picker/dist/style.css';\n\ninterface MyDatePickerProps {\n initialDate?: Date;\n}\n\nexport function MyDatePicker({ initialDate }: MyDatePickerProps) {\n const [selectedDate, setSelectedDate] = useState(initialDate);\n\n const handleDaySelect = (date: Date | undefined) => {\n setSelectedDate(date);\n };\n\n return (\n
\n

Select a Date

\n You selected ${selectedDate.toLocaleDateString()}

`\n : '

Please pick a day.

'\n }\n />\n \n
\n );\n}","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"The default grid markup and class names for UI elements changed in v9.11.3, potentially affecting brittle snapshot tests or custom CSS rules that relied on the previous structure. For example, `day_disabled` is now `disabled`, `cell` is now `day`, and `day` is `day_button`.","severity":"breaking","affected_versions":">=9.11.3"},{"fix":"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.","message":"Since v9.12.0, built-in locales (e.g., `es`, `enUS`) now ship with translated labels for elements like 'Go to next month' or 'Today'. If you were previously providing these translations via the `labels` prop, you might find redundant labels or unexpected behavior.","severity":"gotcha","affected_versions":">=9.12.0"},{"fix":"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.","message":"The `DayPickerInput` component has been entirely removed in v8. Upgrading from v7 or earlier requires a complete rewrite of any input-field integrations, typically by using a controlled `DayPicker` component in conjunction with a custom input field.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Consult the v8 upgrade guide and update all changed prop names in your `DayPicker` components.","message":"Many prop names were changed in v8 (e.g., `showWeekNumbers` to `showWeekNumber`, `initialMonth` to `defaultMonth`, `selectedDays` to `selected`, `disabledDays` to `disabled`). If upgrading from v7, these changes will break existing implementations.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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.","message":"The `date-fns` library became a peer dependency starting from v8. While `react-day-picker` previously relied on it internally, it's now explicitly required for proper functioning, and users need to install it alongside the package.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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: ``.","message":"When using `DayPicker` in range selection mode and a full range is already selected, subsequent clicks would typically extend the existing range. The `resetOnSelect` prop was introduced in v9.14.0 to change this behavior and start a new range.","severity":"gotcha","affected_versions":">=9.14.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"Attempting to use CommonJS `require` syntax with a package that primarily targets ES Modules or when the default export is not correctly accessed.","error":"TypeError: Cannot read properties of undefined (reading 'DayPicker') OR DayPicker is not a function"},{"fix":"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.","cause":"The default CSS stylesheet was not imported or the import path is incorrect, or custom CSS is overriding default styles unintentionally.","error":"DayPicker styles are not applied or look broken."},{"fix":"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.","cause":"When integrating DayPicker with a custom input (especially after `DayPickerInput` was removed), the focus might not persist on the input after a selection due to React's re-rendering.","error":"My custom input field loses focus when selecting a day from the DayPicker."},{"fix":"When using the `selected` prop, always pair it with an `onSelect` prop to manage the state. For example: `const [selected, setSelected] = useState(); return `.","cause":"Starting from v9, `selected` became a controlled prop. If `selected` is provided, `onSelect` must also be provided to handle state updates.","error":"The `selected` prop doesn't seem to update the calendar or change the selected date."}],"ecosystem":"npm"}