React Time Picker

Common errors

• TypeError: get format called on incompatible undefined

  cause An internal issue with date formatting logic, particularly in certain browser environments.
  fix Update `react-time-picker` to version 8.0.3 or newer, as this bug was fixed in that release.

• SyntaxError: Cannot use import statement outside a module

  cause Occurs when running Jest tests because `react-time-picker` is an ESM-only package (since v8.0.0), and Jest typically runs in a CommonJS environment by default.
  fix Configure Jest to process ES modules (e.g., via `babel-jest` with appropriate presets and plugins, or `jest-esm-transformer`), or migrate your test suite to a test runner like Vitest which natively supports ESM.

• ReferenceError: HTMLElement is not defined

  cause This error occurs during Server-Side Rendering (SSR) when the component attempts to access browser-specific global objects that are not available in a Node.js environment.
  fix Update `react-time-picker` to version 6.5.0 or newer, where this SSR compatibility issue was resolved.

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

  cause An error in prop type validation specifically affecting Server-Side Rendering (SSR) environments when the `portalContainer` prop was used.
  fix Update `react-time-picker` to version 6.5.1 or newer, which contains a fix for this SSR-related prop type validation issue.

Warnings

• breaking The package dropped CommonJS build, becoming ESM-only. Direct `require()` statements will fail, and bundlers/test runners may require configuration adjustments.
  Fix: Ensure your project, bundler (e.g., Webpack, Rollup), and test runner (e.g., Jest) are configured to handle ES Modules. For Jest, consider migrating to Vitest or configuring Jest's experimental ESM support.
• breaking The New JSX Transform is now a hard requirement. Older Babel configurations or React versions not using this transform will encounter build errors.
  Fix: Update your Babel configuration to use the new JSX transform. Follow the official React documentation on 'Introducing the New JSX Transform' for detailed instructions.
• breaking `propTypes` were removed from the component. Applications relying on `propTypes` for type checking will no longer receive warnings.
  Fix: Migrate your component type checking to TypeScript or an alternative runtime type validation library.
• gotcha Running unit tests with Jest might fail due to the package being ESM-only since v8.0.0, as Jest's default environment is CommonJS.
  Fix: Configure Jest to transpile ES Modules, use `jest-esm-transformer`, or consider migrating your testing setup to an ESM-first runner like Vitest.

Install

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

Imports

• TimePicker
  wrong:

  const TimePicker = require('react-time-picker');

  correct:

  import TimePicker from 'react-time-picker';

  The package became ESM-only in v8.0.0. CommonJS require() is no longer supported for direct imports.
• TimePicker CSS

  import 'react-time-picker/dist/TimePicker.css';

  Essential for proper styling and visual presentation of the component.
• Clock CSS (often needed)

  import 'react-clock/dist/Clock.css';

  If using the default clock popover, its styles (from `react-clock`) must also be imported separately.

Quickstart

Demonstrates basic usage of `TimePicker` component, including state management for the selected time, configuring display format, and importing necessary CSS for styling.

import React, { useState } from 'react';
import TimePicker from 'react-time-picker';
import 'react-time-picker/dist/TimePicker.css';
import 'react-clock/dist/Clock.css'; // Often needed for the clock overlay

type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyTimePicker() {
  const [value, onChange] = useState<Value>(new Date());

  return (
    <div>
      <h1>Select a Time</h1>
      <TimePicker
        onChange={onChange}
        value={value}
        format="HH:mm" // Example format
        clearIcon={null} // Remove clear button if desired
        disableClock={true} // Disable the clock popover if only input is wanted
      />
      {value && <p>Selected time: {Array.isArray(value) ? value[0]?.toLocaleTimeString() : value.toLocaleTimeString()}</p>}
    </div>
  );
}

export default MyTimePicker;