{"_id":"@ambre972ppm/react-custom-datepicker","_rev":"7-8ea70118627520d428812ceb34719557","name":"@ambre972ppm/react-custom-datepicker","description":"A React component for date and time picking","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.0","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Votre Nom"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.0","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"b214e2d903b32d4a420d4173e505f516f9cd9fb7","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.0.tgz","fileCount":7,"integrity":"sha512-0Kv5UWeBe0I0NSgDGxlHrHXntLuTjFRyjkd+5kFr8Ui93QJfEcayDJ9Jfv7vTmQNq2yuuyH5dNSKIsqdJFe46A==","signatures":[{"sig":"MEYCIQDZ+cWgC6fKD8g5okU7d5r2G1YbUyJhLvvLb4MrdGj+JwIhANZZ9oHwbKyHyEuN277NA2lQ9AA8Sw/+/QB62Kxusb8i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7055},"main":"dist/react-custom-datepicker.js","gitHead":"f4b8394301054cbbf8c656e8ee22c903922e5507","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack","start":"webpack serve --open"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.0_1717148320639_0.9490824582727184","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.1","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.1","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"c5e354cae62bd2e9ddbaa712f423c5821b1e22b7","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.1.tgz","fileCount":5,"integrity":"sha512-kzKpRqBso/fKxQYxT/RX4Fw2pD48iWMHxI0J6OUFxEWfaDZZpPTmrZTEN7iYrtLuNg1Hf1YOKfiuAzGEu8cXkg==","signatures":[{"sig":"MEQCIG2j7UKxJWJbYFggd7QyksoolOOyVcnV5peS48BPUubwAiA1QVc9Z8zw5BktiscuikWyG8EcwG7nXo7HMgvFonyJ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071400},"main":"dist/bundle.js","gitHead":"e466e697dd958cd38a84a864552ec0c2188553de","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack","start":"webpack serve --open"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.1_1717167565199_0.042862974882051486","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.2","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.2","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"fae0871a9b960211a94aebdfb38f4bf54670ea61","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.2.tgz","fileCount":5,"integrity":"sha512-ovfrrf8GuUv51GLRvObMX+cP7K7Mf5yVsaojJ06EQY4KNgHtLUe53Y6TDIv84XgELwTyti6WQNAaXdsaJtUi3w==","signatures":[{"sig":"MEUCIBfdqMVW/dn2/MESF7pOm6JIYD+2TlsmwbFSMCS8YdB5AiEA+5yxiQZkimlaygU65KPJxwo6DqsH0kLqxaamR7joDAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115001},"main":"dist/bundle.js","gitHead":"7ee4c8b95ce29c4c8efca294a233f1bb8bef28e9","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack","start":"webpack serve --open"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.2_1717175390804_0.9639732736491502","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.3","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.3","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"d190adcb022e575c20f053226a16cc3e037dddc2","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.3.tgz","fileCount":11,"integrity":"sha512-05EUILYZLrvhj0pzI8z3ofGd1Z/nkt5sSEQLBEqgNgRyfx7Jv4EYzt0QeKV8CH29toVhgtkMG2nur807Ma1Utw==","signatures":[{"sig":"MEUCIEG04bp8tPo8m0guQJdf4iH4pI3cDUhZggHBvwMADpyGAiEAon222Qrjx6T/uWDdtMD4VCEf2SE1gUT0Qy4ZCjmUH4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1074752},"main":"dist/bundle.js","gitHead":"7ee4c8b95ce29c4c8efca294a233f1bb8bef28e9","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack","start":"webpack serve --open"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.3_1717177886731_0.9147493870817158","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.4","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.4","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"fdc46f9f8434ce19ac9e0c0e783956519090863d","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.4.tgz","fileCount":11,"integrity":"sha512-eUIIV7fM+AZQJzdqzthU44dfT54PXJzGxn6Y7fNyxCVgL1hM/ZUn63LGicidG6OTaHOs37grKPbLuTqQmscXuA==","signatures":[{"sig":"MEUCIQC0R2Bpw+Cs+KbNL38ZjAmh24306PlochH8gp4xoAEnPQIgD3cguVOAyiUTJZvGzM2aPbV+/RZia51trfIpXl79Fmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1074752},"main":"dist/bundle.js","gitHead":"aec62976824cff075bacf08bd1945a65b6eff3dc","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack","start":"webpack serve --open"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.4_1717178513250_0.6898687748499481","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.5","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.5","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"6dbf66ea19d4e8d2345db1bd33a1deacaceeb51a","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.5.tgz","fileCount":13,"integrity":"sha512-t+UUACE70gWgVJky+3WyS6V9S9nzvX82d3X9zUT2k9DwgQkMt3I0ziLjS5IIKKrxlDdc9fooLHUrj2VBAcOwRg==","signatures":[{"sig":"MEUCIQCviMbVBY6+nWmdP+R18jTHh9JeRsEiCfgl2BZoMJKebwIgQfYljWWiVDSrFD7Ch7+gdgoOGbTkK7Wib6vm7qyuFFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18618},"main":"dist/bundle.js","gitHead":"3cf145b0b29ceb131fbf29c1a0dae15a8a2df16c","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack --config webpack.prod.js","start":"webpack serve --config webpack.dev.js"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.5_1717236610948_0.6190099722958662","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.6","keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","_id":"@ambre972ppm/react-custom-datepicker@1.0.6","maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"dist":{"shasum":"5ec40e0471dcf520ac478ae6e34dcb376d428b85","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.6.tgz","fileCount":6,"integrity":"sha512-P6RRMniVoLhVcXac8GRFXXq4BTXhwxnOEq3ujn5L2WAipThXau4xRq9AzBE0Kn+ZcBJxbPlqrkK3yagQmsHrlA==","signatures":[{"sig":"MEUCIQDMrUXDFlkrgs9y69/txFhX/sP43GFskv+xunS0fVE4xwIgeSoftVuj0dT43olKgNinSIvnxiO0PwD7+v5I6TuogL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9525},"main":"dist/bundle.js","gitHead":"402c70664efd3c74d6f2ba7414b81c82bc44218c","scripts":{"doc":"jsdoc -c jsdoc.conf.json","build":"webpack --config webpack.prod.js","start":"webpack serve --config webpack.dev.js"},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"_npmVersion":"9.5.1","description":"A React component for date and time picking","directories":{},"_nodeVersion":"18.16.1","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.11","webpack":"^5.64.4","css-loader":"^6.3.0","@babel/core":"^7.12.3","webpack-cli":"^4.9.1","babel-loader":"^8.1.0","style-loader":"^3.3.0","@babel/preset-env":"^7.12.1","webpack-dev-server":"^4.4.0","@babel/preset-react":"^7.12.5","html-webpack-plugin":"^5.3.2","mini-css-extract-plugin":"^2.4.3"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-datepicker_1.0.6_1717240967228_0.7372176367707302","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"@ambre972ppm/react-custom-datepicker","version":"1.0.7","description":"A React component for date and time picking","main":"dist/bundle.js","scripts":{"start":"webpack serve --config webpack.dev.js","build":"webpack --config webpack.prod.js","doc":"jsdoc -c jsdoc.conf.json"},"keywords":["react","datepicker","datetimepicker"],"author":{"name":"Ambre GONDRY"},"license":"ISC","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","babel-loader":"^8.1.0","css-loader":"^6.3.0","html-webpack-plugin":"^5.3.2","jsdoc":"^3.6.11","style-loader":"^3.3.0","mini-css-extract-plugin":"^2.4.3","webpack":"^5.64.4","webpack-cli":"^4.9.1","webpack-dev-server":"^4.4.0"},"gitHead":"b0f14bde354ed51efdcf55ee755103ab26350655","_id":"@ambre972ppm/react-custom-datepicker@1.0.7","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-RemNOIga7RWaCjfoexBGtCCSdD1qWwBAcZD/Lje7p3IspposPkFMqnJ35STJ0m3lt4C2Y9QEu+k+o2J/gNOdFg==","shasum":"d88e775a2d233bb7516ef3bbf27798ad2fa974b2","tarball":"https://registry.npmjs.org/@ambre972ppm/react-custom-datepicker/-/react-custom-datepicker-1.0.7.tgz","fileCount":6,"unpackedSize":9582,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJC67D9D16uTvQB4UyBvp4bVaG4SmLho0ZmP0/IohJRAiAEPnRza8mTrQanSKKmKkp4g7NJKOu+M0S+FCKpWw4cgg=="}]},"_npmUser":{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"},"directories":{},"maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-custom-datepicker_1.0.7_1717242383109_0.46110056559872303"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-31T09:38:40.519Z","modified":"2024-06-01T11:46:23.455Z","1.0.0":"2024-05-31T09:38:41.511Z","1.0.1":"2024-05-31T14:59:25.384Z","1.0.2":"2024-05-31T17:09:50.950Z","1.0.3":"2024-05-31T17:51:26.943Z","1.0.4":"2024-05-31T18:01:53.501Z","1.0.5":"2024-06-01T10:10:11.102Z","1.0.6":"2024-06-01T11:22:47.374Z","1.0.7":"2024-06-01T11:46:23.293Z"},"maintainers":[{"name":"ambre972ppm","email":"gondry.ambre@gmail.com"}],"author":{"name":"Ambre GONDRY"},"keywords":["react","datepicker","datetimepicker"],"license":"ISC","readme":"\r\n## Installation\r\n\r\nTo install the component, use npm:\r\n\r\n```sh\r\nnpm install @ambre972ppm/react-custom-datepicker\r\n```\r\n\r\nOR\r\n\r\n```sh\r\nyarn add @ambre972ppm/react-custom-datepicker\r\n```\r\n\r\n## Usage\r\n### Basic Example\r\nImport the DateTimePicker component and its styles into your React application:\r\n\r\n```jsx\r\nimport React, { useState } from 'react';\r\nimport DateTimePicker from '@ambre972ppm/react-custom-datepicker';\r\nimport '@ambre972ppm/react-custom-datepicker/dist/DateTimePicker.css';\r\n\r\nconst App = () => {\r\n const [selectedDate, setSelectedDate] = useState(null);\r\n\r\n return (\r\n
\r\n

DateTimePicker Demo

\r\n \r\n {selectedDate &&

Selected Date: {selectedDate.toString()}

}\r\n
\r\n );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n### Options \r\n\r\nYou can customize the component with the following properties:\r\n\r\n* label (string): The label for the date picker. \r\n* selected (Date): The selected date.\r\n* onChange (function): The function to call when the date changes.\r\n* id (string): The id for the date picker.\r\n* showTimeSelect (boolean, default: true): Whether to show time selection.\r\n* dateFormat (string, default: \"MMMM d, yyyy haa\"): The format of the date.\r\n\r\n### Examples\r\n#### DatePicker\r\n```jsx\r\n\r\n```\r\n\r\n#### TimePicker\r\n```jsx\r\n\r\n```\r\n\r\n### Options to Highlight Specific Dates or Periods \r\nYou can use the `highlightDates` prop to highlight specific dates:\r\n```jsx\r\n\r\n```\r\n\r\n## JS Build Help\r\n\r\n### Requirements\r\nThis project requires Node.js and npm. Download and install Node.js.\r\n\r\n### Installing Dependencies\r\nInstall npm dependencies:\r\n```sh\r\nnpm install\r\n```\r\n\r\n### Building\r\nTo build the production files:\r\n```sh\r\nnpm run build\r\n```\r\n\r\n### Generated Files Structure\r\nWhen the build is complete, you will have the following files:\r\n\r\n* `dist/bundle.js` - browser file\r\n* `dist/bundle.min.js` - minified browser file\r\n* `dist/DateTimePicker.css.css` - styles file\r\n\r\n## Contribution\r\nContributions are welcome! Please submit pull requests or open issues on GitHub.\r\n\r\n## License\r\nThis project is licensed under the ISC License.\r\n\r\n## Conversion Explanation\r\nThe conversion from the jQuery plugin to a React component involved the following steps:\r\n\r\n### Replacing jQuery APIs with React APIs\r\n* Using React hooks (`useState`, `useEffect`) to manage state and side effects.\r\n* Utilizing `react-datepicker` to provide the date and time picking functionality, replacing the original jQuery plugin.\r\n\r\n### Component Structure\r\n* The `DateTimePicker` component encapsulates the date and time picking logic.\r\n* Props are used to customize the component's behavior (e.g., showing or hiding the time selection).\r\n\r\n### Styles\r\n* CSS styles were adapted to match the desired appearance of the component.\r\n* Using CSS classes to style the date and time picker.\r\n\r\n### Development Environment Configuration\r\n* Using Webpack to bundle the JavaScript and CSS files.\r\n* Using Babel to transpile JSX and ES6 code to browser-compatible JavaScript.\r\n\r\n### Documentation\r\n* Using JSDoc to generate detailed documentation of the component's properties and usage.\r\n* Creating a comprehensive README to guide users on installation, usage, and contribution to the project.\r\n* This conversion allows the date and time picker to be used effectively in React applications, leveraging React's modern features and syntax.\r\n","readmeFilename":"README.md"}