Registry / web-framework / react-datetime-picker

react-datetime-picker

library7.0.2jsnpmunverified

react-datetime-picker is a React component that provides a flexible and comprehensive solution for picking both dates and times. It is currently at stable version 7.0.2 and actively maintained, with frequent minor and patch releases, and major versions introducing modern practices like ESM-only builds. Key differentiators include its focus on integrating seamlessly into React applications, shipping with TypeScript types for improved developer experience, and embracing modern web standards and security features such as OIDC trusted publishing and npm provenance. The component supports a wide range of React versions, from 16.8.0 up to 19.0.0, and simplifies date and time input within forms.

web-framework

npm install react-datetime-picker

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DATETIME-PIC

react-datetime-picker

web-frameworkjavascriptv7.0.2

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.

DateTimePicker

✓ import DateTimePicker from 'react-datetime-picker';

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

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

✗ const [value, setValue] = useState(new Date()); <DateTimePicker onChange={setValue} 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`.

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;

Debug

Known issues

breakingAs 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).

affects: >=7.0.0

breakingVersion 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`).

affects: >=6.0.0

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

affects: >=6.0.0

gotchaAfter 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).

affects: >=7.0.0

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

affects: >=5.5.3

Errors

Common errors & fixes

TypeError: get format called on incompatible undefined

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

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

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

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.

Upgrade

Version history

7.0.2latest on npm

Audit

Dependencies

reactrequiredRequired for rendering React components.

react-domrequiredRequired for rendering React components to the DOM.

@types/reactoptionalTypeScript type definitions for React. Peer dependency for projects using TypeScript.

Agent activity

4 hits · last 30 days

node

Resources

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

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