Registry / web-framework / react-datepicker

react-datepicker

library9.1.0jsnpmunverified

React Datepicker is a comprehensive and highly customizable date picker component for React applications, currently stable at version 9.1.0. It receives frequent updates, with minor and patch releases often occurring monthly, addressing bugs, accessibility, and adding features, while major versions introduce significant enhancements like timezone support. Key differentiators include extensive configuration options for date and time selection, robust support for date ranges, year/month/quarter selection, and a strong focus on accessibility. It integrates seamlessly with `date-fns` for date manipulation and `date-fns-tz` for timezone handling, offering developers a flexible solution for various date input requirements in their projects. It ships with TypeScript types, facilitating safer and more predictable development.

web-framework type-stubs

npm install react-datepicker

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-DATEPICKER

react-datepicker

web-frameworkjavascriptv9.1.0

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-datepicker';

✗ import { DatePicker } from 'react-datepicker';

DatePicker is a default export.

CSS

✓ import 'react-datepicker/dist/react-datepicker.css';

✗ import 'react-datepicker/react-datepicker.css';

The stylesheet is located in the `dist` folder. Ensure your build system (e.g., Webpack) can process CSS imports.

ReactDatePickerCustomHeaderProps

✓ import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';

✗ import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';

When importing types, use `import type` for better tree-shaking and clarity in TypeScript projects.

registerLocale

✓ import { registerLocale } from 'react-datepicker';

✗ import registerLocale from 'react-datepicker/dist/locales/registerLocale';

Locale registration utilities are named exports from the main package, not from a subpath.

This quickstart demonstrates basic single date and date range selection, including CSS import and locale registration, within a functional React component.

import React, { useState } from 'react'; import DatePicker, { registerLocale } from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { enUS } from 'date-fns/locale'; registerLocale('en-US', enUS); // Register a locale if needed, although en-US is default const MyDatePickerExample = () => { const [startDate, setStartDate] = useState(new Date()); const [endDate, setEndDate] = useState(null); const handleDateChange = (date) => { setStartDate(date); }; const handleRangeChange = ([start, end]) => { setStartDate(start); setEndDate(end); }; return ( <div> <h3>Single Date Selection</h3> <DatePicker selected={startDate} onChange={handleDateChange} dateFormat="MM/dd/yyyy" /> <h3>Date Range Selection</h3> <DatePicker selected={startDate} onChange={handleRangeChange} startDate={startDate} endDate={endDate} selectsRange dateFormat="MM/dd/yyyy" isClearable={true} /> </div> ); }; export default MyDatePickerExample;

Debug

Known issues

breakingVersion 9.0.0 introduced timezone support and `date-fns-tz` as an optional peer dependency. While optional, if `timeZone` prop is used, `date-fns-tz` must be installed.

fix

Install `date-fns-tz`: `npm install date-fns-tz` or `yarn add date-fns-tz`. Ensure your date objects are handled correctly with `date-fns` utilities if manipulating them.

affects: >=9.0.0

breakingParsing behavior, specifically for certain date formats, was accidentally removed in v8.0.0, causing regressions for users upgrading from v7.x. This was restored in v9.1.0.

fix

Upgrade to `react-datepicker@9.1.0` or higher to restore intended date parsing behavior. If sticking to older v8 versions, manually parse dates before passing them to the component or ensure formats are strictly compatible.

affects: >=8.0.0 <9.1.0

gotchaReact 19 compatibility required fixes, particularly related to `@floating-ui/react`. Older versions might exhibit unexpected behavior or warnings with React 19.

fix

Upgrade to `react-datepicker@8.6.0` or higher for better compatibility with React 19.

affects: <8.6.0

gotchaThe component's CSS must be imported separately. Failing to import `react-datepicker/dist/react-datepicker.css` will result in an unstyled component.

fix

Ensure `import 'react-datepicker/dist/react-datepicker.css';` is included in your application's entry point or a component where the datepicker is used. Verify your build system is configured to handle CSS imports.

affects: >=1.0.0

gotchaLocalization requires `date-fns` locale data and manual registration. Without registering the desired locale, the component will default to `en-US`.

fix

Import the desired locale from `date-fns/locale` and register it using `registerLocale('my-locale-code', myLocale);` from `react-datepicker`.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Attempting to import `DatePicker` as a named import instead of a default import.

fix

Change `import { DatePicker } from 'react-datepicker';` to `import DatePicker from 'react-datepicker';`.

Module not found: Error: Can't resolve 'react-datepicker/react-datepicker.css' in '...' or similar CSS import errors.

Incorrect path for the CSS import.

fix

The correct path is `react-datepicker/dist/react-datepicker.css`. Update your import statement accordingly: `import 'react-datepicker/dist/react-datepicker.css';`

TypeError: Cannot read properties of undefined (reading 'format') or similar errors related to date formatting functions.

This often occurs when `date-fns` locale or date functions are expected but not properly imported or registered, or an invalid date object is passed.

fix

Ensure `date-fns` functions are imported correctly if you're using them, and that valid `Date` objects are passed to the `selected` prop and `onChange` handler. For localization, make sure `registerLocale` is used with a valid `date-fns` locale object.

Invariant Violation: You must pass an array of numbers to the 'highlightDates' prop.

The `highlightDates` prop expects an array of `Date` objects, not numbers or strings.

fix

Ensure that the `highlightDates` prop receives an array where each element is a `Date` object, e.g., `highlightDates={[new Date(), addDays(new Date(), 7)]}`.

Upgrade

Version history

9.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components.

react-domrequiredPeer dependency for rendering React components to the DOM.

date-fns-tzoptionalRequired for timezone support (via `timeZone` prop) introduced in v9.0.0.

date-fnsoptionalCommonly used for date manipulation functions when working with Date objects in conjunction with the datepicker.

Agent activity

34 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/Hacker0x01/react-datepicker ↗

packagehttps://www.npmjs.com/package/react-datepicker ↗

homepagehttps://reactdatepicker.com ↗