Registry / web-framework / react-date-picker

react-date-picker

library12.0.2jsnpmunverified

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.

web-framework

npm install react-date-picker

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-DATE-PICKER

react-date-picker

web-frameworkjavascriptv12.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DatePicker

✓ import DatePicker from 'react-date-picker';

✗ import { DatePicker } from 'react-date-picker'; const DatePicker = require('react-date-picker');

The DatePicker component is a default export. CommonJS 'require' syntax is not supported since v12.0.0 as the package is ESM-only.

Value

✓ import type { Value } from 'react-date-picker';

Type import for the value prop, useful for TypeScript users to correctly type the date state.

DatePicker.css

✓ import 'react-date-picker/dist/DatePicker.css'; import 'react-calendar/dist/Calendar.css';

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.

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.

import React, { useState } from 'react'; import DatePicker from 'react-date-picker'; import 'react-date-picker/dist/DatePicker.css'; import 'react-calendar/dist/Calendar.css'; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; function MyDatePickerComponent() { const [value, onChange] = useState<Value>(new Date()); return ( <div> <h1>Date Selection Example</h1> <p>Select a date using the React Date Picker:</p> <DatePicker onChange={onChange} value={value} /> {value && Array.isArray(value) ? ( <p>Selected date range: {value[0]?.toDateString() || 'None'} - {value[1]?.toDateString() || 'None'}</p> ) : ( <p>Selected date: {value?.toDateString() || 'None'}</p> )} <p>Current value in state: {JSON.stringify(value)}</p> </div> ); } export default MyDatePickerComponent;

Debug

Known issues

breakingThe package dropped CommonJS build, becoming ESM-only. Direct 'require()' statements will no longer work.

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.

affects: >=12.0.0

breakingReact's New JSX Transform is now a mandatory requirement for this package.

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.

affects: >=11.0.0

breaking`propTypes` have been entirely removed from the package.

fix

If your project relies on `propTypes` for type checking, consider migrating to TypeScript or implementing an alternative runtime type-checking solution.

affects: >=11.0.0

gotchaDue to the transition to ESM-only, running unit tests with Jest might encounter compatibility issues.

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.

affects: >=12.0.0

Errors

Common errors & fixes

TypeError: get format called on incompatible undefined

An internal date formatting bug affecting specific browser environments.

fix

Update `react-date-picker` to version `12.0.2` or newer to resolve this bug fix.

ReferenceError: require is not defined

Attempting to use CommonJS `require()` syntax in an environment where `react-date-picker` is an ESM-only package (v12.0.0+).

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.

Failed prop type: DatePicker: prop type portalContainer is invalid

Issue with `portalContainer` prop validation, potentially during server-side rendering or with incorrect value types.

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.

ReferenceError: HTMLElement is not defined (during server-side rendering)

The package tried to access the browser-specific global `HTMLElement` object during SSR, which is not available in Node.js environments.

fix

Update `react-date-picker` to version `10.5.0` or newer, which includes fixes for this specific SSR compatibility issue.

Upgrade

Version history

12.0.2latest on npm

Audit

Dependencies

@types/reactrequiredRequired for TypeScript definitions and type checking.

reactrequiredCore React library for building user interfaces.

react-domrequiredReact library for DOM-specific rendering.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/wojtekmaj/react-date-picker ↗

packagehttps://www.npmjs.com/package/react-date-picker ↗

homepagehttps://projects.wojtekmaj.pl/react-date-picker/ ↗