Registry / web-framework / react-time-picker

react-time-picker

library8.0.3jsnpmunverified

`react-time-picker` is a React component that provides an intuitive interface for users to select a specific time. It is actively maintained, with the current stable version being 8.0.3, released recently with improvements like OIDC trusted publishing and immutable releases. The library generally follows a stable release cadence, with major versions addressing significant breaking changes or new React features, and minor/patch versions focusing on bug fixes and enhancements. Key differentiators include its focus on accessibility, ease of integration into existing React projects, and reliance on native browser datetime capabilities where appropriate, while offering extensive customization for internationalization and display formats. It provides a clean, unopinionated UI that integrates well into various design systems, offering flexibility without enforcing a specific look and feel, and ships with TypeScript types for improved developer experience.

web-framework

npm install react-time-picker

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TIME-PICKER

react-time-picker

web-frameworkjavascriptv8.0.3

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.

TimePicker

✓ import TimePicker from 'react-time-picker';

✗ const TimePicker = require('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.

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;

Debug

Known issues

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

affects: >=8.0.0

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

affects: >=7.0.0

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.

affects: >=7.0.0

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

affects: >=8.0.0

Errors

Common errors & fixes

TypeError: get format called on incompatible undefined

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

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

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

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.

Upgrade

Version history

8.0.3latest on npm

Audit

Dependencies

reactrequiredRequired React host component for rendering UI.

react-domrequiredRequired for mounting and rendering React components.

@types/reactoptionalTypeScript type definitions for React. Used for type checking and IntelliSense.

Agent activity

4 hits · last 30 days

node

Resources

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

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