React DateTime Picker

Common errors

• TypeError: get format called on incompatible undefined

  cause This error was observed in some browsers, often related to how date formatting or locale utilities were accessed internally with potentially undefined values.
  fix Upgrade to react-datetime-picker v7.0.2 or newer, as this specific bug was fixed in that release.

• Failed prop type: DateTimePicker: prop type portalContainer is invalid

  cause An issue with prop type validation for `portalContainer` when using server-side rendering (SSR), leading to validation errors during SSR.
  fix Upgrade to react-datetime-picker v5.5.2 or newer, where this server-side rendering specific prop type validation error was addressed.

• ReferenceError: HTMLElement is not defined

  cause This error occurs during server-side rendering (SSR) when client-side DOM APIs like `HTMLElement` are accessed in a Node.js environment where they do not exist.
  fix Upgrade to react-datetime-picker v5.5.0 or newer. This version specifically addressed `HTMLElement is not defined` errors during SSR by ensuring DOM-specific code is not executed on the server.

• Jest Encountered an unexpected token 'export ... from ...'

  cause After upgrading to v7.0.0, Jest-based test setups may fail when trying to import `react-datetime-picker` because the library is now ESM-only, and Jest's default configuration struggles with ESM.
  fix Configure Jest to transpile ESM modules or consider migrating to a test runner like Vitest that natively supports ESM. This might involve using `jest-esm-transformer` or updating your `package.json` to include `"type": "module"` and configuring Jest accordingly.

Warnings

• breaking As of v7.0.0, react-datetime-picker has dropped CommonJS build support and is now ESM-only. Applications using CommonJS (e.g., older Node.js environments or certain test runners like Jest) will need to adapt.
  Fix: For applications, ensure your bundler supports ESM. For testing with Jest, consider migrating to Vitest or configuring Jest for ESM support (experimental at the time of v7 release).
• breaking Version 6.0.0 introduced a requirement for the New JSX Transform in React. If your project is not configured for it, components might fail to render or build.
  Fix: Enable the New JSX Transform in your Babel configuration or build setup as per the React documentation (e.g., set `"runtime": "automatic"` in `@babel/preset-react`).
• breaking The `propTypes` mechanism was entirely removed in v6.0.0. Projects relying on `propTypes` for validation will lose this functionality.
  Fix: Migrate from `propTypes` to TypeScript for static type checking or adopt a runtime type-checking solution like `zod` or `io-ts` if dynamic validation is strictly necessary.
• gotcha After upgrading to v7.0.0, users running unit tests with Jest might encounter issues due to the package becoming ESM-only, as Jest's ESM support can be challenging.
  Fix: Consider migrating your testing framework to Vitest, which has robust ESM support, or carefully configure Jest for ESM (which may require experimental flags or specific transformers).
• gotcha The package adopted OIDC trusted publishing (v7.0.2) and npm provenance statements (v5.5.3). While this enhances supply chain security, it's a notable change in publishing metadata that tools relying on specific package integrity checks might need to be aware of.
  Fix: No direct fix needed; this is an improvement. Ensure your build pipeline and security scanners are up-to-date to benefit from and correctly interpret these security enhancements.

Install

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

Imports

• DateTimePicker
  wrong:

  const DateTimePicker = require('react-datetime-picker');

  correct:

  import DateTimePicker from 'react-datetime-picker';

  Since v7.0.0, the package is ESM-only and does not provide a CommonJS build. Use ES module import syntax.
• DateTimePickerProps

  import type { DateTimePickerProps } from 'react-datetime-picker';

  Importing types for use with TypeScript. This helps ensure prop type correctness and autocompletion.
• value
  wrong:

  const [value, setValue] = useState(new Date());
  <DateTimePicker onChange={setValue} value={value} />

  correct:

  const [value, onChange] = useState(new Date());
  <DateTimePicker onChange={onChange} value={value} />

  The `onChange` prop expects a function that takes the new value. It's common to name the state setter `setValue` but the prop expects `onChange`.

Quickstart

This quickstart demonstrates how to integrate DateTimePicker into a React functional component using useState for managing the selected date and time. It also includes necessary CSS imports and common prop configurations for formatting, icons, and locale.

import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';
import 'react-datetime-picker/dist/DateTimePicker.css';
import 'react-calendar/dist/Calendar.css';
import 'react-clock/dist/Clock.css';

interface MyDateTimePickerProps {}

const MyDateTimePicker: React.FC<MyDateTimePickerProps> = () => {
  const [value, onChange] = useState<Date | null>(new Date());

  return (
    <div>
      <h1>Select Date and Time</h1>
      <DateTimePicker
        onChange={onChange}
        value={value}
        clearIcon={null}
        calendarIcon={null}
        format="y-MM-dd HH:mm:ss"
        disableClock={false}
        locale="en-US"
      />
      {
        value && (
          <p>Selected: {value.toLocaleString()}</p>
        )
      }
    </div>
  );
};

export default MyDateTimePicker;