React Date Picker Component

Common errors

• TypeError: get format called on incompatible undefined

  cause 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

  cause 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

  cause 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)

  cause 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.

Warnings

• breaking The 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.
• breaking React'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.
• 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.
• gotcha Due 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.

Install

• npm install react-date-picker npm
• yarn add react-date-picker yarn
• pnpm add react-date-picker pnpm

Imports

• DatePicker
  wrong:

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

  correct:

  import DatePicker from '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.

Quickstart

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;