{"id":11680,"library":"react-date-picker","title":"React Date Picker Component","description":"react-date-picker is a flexible date picker component for React applications, providing robust functionalities for selecting dates, months, and years. Its current stable version is 12.0.2. The package maintains an active release cadence, with minor and patch updates occurring frequently to address bugs and improve developer experience, while major versions are released less often, coinciding with significant architectural shifts or React version compatibility updates. Key differentiators include its lightweight nature, comprehensive TypeScript support, enhanced prop documentation via JSDoc for improved IDE assistance, and its transition to being an ESM-only package since v12.0.0, aligning with modern JavaScript module standards. It supports React versions 16.8.0 through 19.0.0 and mandates the New JSX Transform since v11.0.0.","status":"active","version":"12.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/wojtekmaj/react-date-picker","tags":["javascript","calendar","date","date-picker","month-picker","react","typescript"],"install":[{"cmd":"npm install react-date-picker","lang":"bash","label":"npm"},{"cmd":"yarn add react-date-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-date-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for TypeScript definitions and type checking.","package":"@types/react","optional":false},{"reason":"Core React library for building user interfaces.","package":"react","optional":false},{"reason":"React library for DOM-specific rendering.","package":"react-dom","optional":false}],"imports":[{"note":"The DatePicker component is a default export. CommonJS 'require' syntax is not supported since v12.0.0 as the package is ESM-only.","wrong":"import { DatePicker } from 'react-date-picker';\nconst DatePicker = require('react-date-picker');","symbol":"DatePicker","correct":"import DatePicker from 'react-date-picker';"},{"note":"Type import for the value prop, useful for TypeScript users to correctly type the date state.","symbol":"Value","correct":"import type { Value } from 'react-date-picker';"},{"note":"It is crucial to import the necessary CSS files for both the DatePicker and its underlying Calendar component for correct styling. These are separate imports.","symbol":"DatePicker.css","correct":"import 'react-date-picker/dist/DatePicker.css';\nimport 'react-calendar/dist/Calendar.css';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport DatePicker from 'react-date-picker';\nimport 'react-date-picker/dist/DatePicker.css';\nimport 'react-calendar/dist/Calendar.css';\n\ntype ValuePiece = Date | null;\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nfunction MyDatePickerComponent() {\n const [value, onChange] = useState(new Date());\n\n return (\n
\n

Date Selection Example

\n

Select a date using the React Date Picker:

\n \n {value && Array.isArray(value) ? (\n

Selected date range: {value[0]?.toDateString() || 'None'} - {value[1]?.toDateString() || 'None'}

\n ) : (\n

Selected date: {value?.toDateString() || 'None'}

\n )}\n

Current value in state: {JSON.stringify(value)}

\n
\n );\n}\n\nexport default MyDatePickerComponent;","lang":"typescript","description":"This quickstart code demonstrates how to integrate `react-date-picker` into a React component, manage its state using `useState`, handle date changes, and correctly import required styles."},"warnings":[{"fix":"Migrate all imports from CommonJS 'require()' to ES Modules 'import' syntax. Ensure your build configuration (e.g., Webpack, Rollup, Parcel) is set up to correctly handle ESM.","message":"The package dropped CommonJS build, becoming ESM-only. Direct 'require()' statements will no longer work.","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Ensure your project's build setup (e.g., Babel with '@babel/preset-react') is configured to use the New JSX Transform. Refer to the official React documentation for migration instructions.","message":"React's New JSX Transform is now a mandatory requirement for this package.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"If your project relies on `propTypes` for type checking, consider migrating to TypeScript or implementing an alternative runtime type-checking solution.","message":"`propTypes` have been entirely removed from the package.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"Consider migrating your unit testing framework to Vitest, which has native ESM support, or configure Jest to correctly handle ESM modules by using transformers like `babel-jest` with appropriate module configurations.","message":"Due to the transition to ESM-only, running unit tests with Jest might encounter compatibility issues.","severity":"gotcha","affected_versions":">=12.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update `react-date-picker` to version `12.0.2` or newer to resolve this bug fix.","cause":"An internal date formatting bug affecting specific browser environments.","error":"TypeError: get format called on incompatible undefined"},{"fix":"Change your import statements from `const DatePicker = require('react-date-picker');` to `import DatePicker from 'react-date-picker';`. Verify your bundler/environment supports ESM.","cause":"Attempting to use CommonJS `require()` syntax in an environment where `react-date-picker` is an ESM-only package (v12.0.0+).","error":"ReferenceError: require is not defined"},{"fix":"Ensure the `portalContainer` prop, if used, is provided with a valid DOM element or reference. For SSR issues, update to `react-date-picker@10.5.1` or newer.","cause":"Issue with `portalContainer` prop validation, potentially during server-side rendering or with incorrect value types.","error":"Failed prop type: DatePicker: prop type portalContainer is invalid"},{"fix":"Update `react-date-picker` to version `10.5.0` or newer, which includes fixes for this specific SSR compatibility issue.","cause":"The package tried to access the browser-specific global `HTMLElement` object during SSR, which is not available in Node.js environments.","error":"ReferenceError: HTMLElement is not defined (during server-side rendering)"}],"ecosystem":"npm"}