{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-datetime-picker"],"cli":null},"imports":["import DateTimePicker from 'react-datetime-picker';","import type { DateTimePickerProps } from 'react-datetime-picker';","const [value, onChange] = useState(new Date());\n<DateTimePicker onChange={onChange} value={value} />"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}