{"id":11682,"library":"react-datetime-picker","title":"React DateTime Picker","description":"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.","status":"active","version":"7.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/wojtekmaj/react-datetime-picker","tags":["javascript","calendar","date","date-picker","datetime","datetime-picker","react","time","time-picker","typescript"],"install":[{"cmd":"npm install react-datetime-picker","lang":"bash","label":"npm"},{"cmd":"yarn add react-datetime-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-datetime-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering React components.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React. Peer dependency for projects using TypeScript.","package":"@types/react","optional":true}],"imports":[{"note":"Since v7.0.0, the package is ESM-only and does not provide a CommonJS build. Use ES module import syntax.","wrong":"const DateTimePicker = require('react-datetime-picker');","symbol":"DateTimePicker","correct":"import DateTimePicker from 'react-datetime-picker';"},{"note":"Importing types for use with TypeScript. This helps ensure prop type correctness and autocompletion.","symbol":"DateTimePickerProps","correct":"import type { DateTimePickerProps } from 'react-datetime-picker';"},{"note":"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`.","wrong":"const [value, setValue] = useState(new Date());\n<DateTimePicker onChange={setValue} value={value} />","symbol":"value","correct":"const [value, onChange] = useState(new Date());\n<DateTimePicker onChange={onChange} value={value} />"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport DateTimePicker from 'react-datetime-picker';\nimport 'react-datetime-picker/dist/DateTimePicker.css';\nimport 'react-calendar/dist/Calendar.css';\nimport 'react-clock/dist/Clock.css';\n\ninterface MyDateTimePickerProps {}\n\nconst MyDateTimePicker: React.FC<MyDateTimePickerProps> = () => {\n  const [value, onChange] = useState<Date | null>(new Date());\n\n  return (\n    <div>\n      <h1>Select Date and Time</h1>\n      <DateTimePicker\n        onChange={onChange}\n        value={value}\n        clearIcon={null}\n        calendarIcon={null}\n        format=\"y-MM-dd HH:mm:ss\"\n        disableClock={false}\n        locale=\"en-US\"\n      />\n      {\n        value && (\n          <p>Selected: {value.toLocaleString()}</p>\n        )\n      }\n    </div>\n  );\n};\n\nexport default MyDateTimePicker;","lang":"typescript","description":"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."},"warnings":[{"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).","message":"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.","severity":"breaking","affected_versions":">=7.0.0"},{"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`).","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"The `propTypes` mechanism was entirely removed in v6.0.0. Projects relying on `propTypes` for validation will lose this functionality.","severity":"breaking","affected_versions":">=6.0.0"},{"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).","message":"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.","severity":"gotcha","affected_versions":">=7.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=5.5.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to react-datetime-picker v7.0.2 or newer, as this specific bug was fixed in that release.","cause":"This error was observed in some browsers, often related to how date formatting or locale utilities were accessed internally with potentially undefined values.","error":"TypeError: get format called on incompatible undefined"},{"fix":"Upgrade to react-datetime-picker v5.5.2 or newer, where this server-side rendering specific prop type validation error was addressed.","cause":"An issue with prop type validation for `portalContainer` when using server-side rendering (SSR), leading to validation errors during SSR.","error":"Failed prop type: DateTimePicker: prop type portalContainer is invalid"},{"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.","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.","error":"ReferenceError: HTMLElement is not defined"},{"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.","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.","error":"Jest Encountered an unexpected token 'export ... from ...'"}],"ecosystem":"npm"}