{"_id":"@atom-design-mog/datepicker","_rev":"3-a0bdcf39a8aef810e1cf20d0963f44ce","name":"@atom-design-mog/datepicker","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@atom-design-mog/datepicker","version":"1.0.0","keywords":["react-native","datepicker","datetime","range","time","calendar"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/datepicker@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"6aa98ed400dd8a696f57c081760c0eb475c1bbb1","tarball":"https://registry.npmjs.org/@atom-design-mog/datepicker/-/datepicker-1.0.0.tgz","fileCount":3,"integrity":"sha512-85WW8JkkRAMM2C5puQwYEy5lB6uha9fAoKElwDKDkk0sKvVCuIPVetObCvPA5sEYtY855psMBKSF0jhmnREjtA==","signatures":[{"sig":"MEQCIFlNQvka7wPMlsHClM4csMqMfPxTOYaK/bzSVOY7/WTfAiBSe15bHnUtCGTV8P8wTrASqtzH17GjWPoKsVNUb7DgDg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6324},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A versatile React Native DatePicker component supporting date, time, datetime, and range selection.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","@react-native-community/datetimepicker":">=6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/datepicker_1.0.0_1763726036858_0.30125284234954885","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/datepicker","version":"1.0.1","keywords":["react-native","datepicker","datetime","range","time","calendar"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/datepicker@1.0.1","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"bbd59387175adaf330b3f4c45d17a7457c330570","tarball":"https://registry.npmjs.org/@atom-design-mog/datepicker/-/datepicker-1.0.1.tgz","fileCount":4,"integrity":"sha512-P0OkY8WfldaLCFHRbvzyzijENl/8SVU4ucjsRH/Sc7+FvCWxb/icYPrEwWYN4OctfLNPRb57yxOLfy2zB+INoQ==","signatures":[{"sig":"MEUCIQCkVNg65zrpi7onwSywnb0OFSHAnEC3yUKjjgTddRIeNwIgEP0MmykBy0322RTVU5nJt5SgCCahDsOHLmjWGP+7z14=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10802},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A versatile React Native DatePicker component supporting date, time, datetime, and range selection.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","@react-native-community/datetimepicker":">=6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/datepicker_1.0.1_1763967297867_0.8819902066501186","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atom-design-mog/datepicker","version":"1.0.2","description":"A versatile React Native DatePicker component supporting date, time, datetime, and range selection.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","datepicker","datetime","range","time","calendar"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","@react-native-community/datetimepicker":">=6.0.0"},"_id":"@atom-design-mog/datepicker@1.0.2","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-9I2LGzdILhrYDLwTTNo0JshtwQ9gU9Z8S7hNdHudMlz6I65Hl3/+B6D7ZrBn7RTT1su3gGN6R5OOH/UJACJKLw==","shasum":"abf83e26b142b9287aeb6171bf2d91751a504452","tarball":"https://registry.npmjs.org/@atom-design-mog/datepicker/-/datepicker-1.0.2.tgz","fileCount":4,"unpackedSize":11535,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDPRqZ3NDCEq5BQS3M67n43zoK0wVRQSXAXrIxyQbJdcwIhAOGP0Kv5LX4Z5lhxgiNvVHj0G934W8TCZ9APwMFoJ9lq"}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datepicker_1.0.2_1763967424698_0.5837148977526214"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T11:53:56.780Z","modified":"2025-11-24T06:57:05.081Z","1.0.0":"2025-11-21T11:53:57.036Z","1.0.1":"2025-11-24T06:54:58.034Z","1.0.2":"2025-11-24T06:57:04.877Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","datepicker","datetime","range","time","calendar"],"description":"A versatile React Native DatePicker component supporting date, time, datetime, and range selection.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/datepicker\n\nA powerful, flexible, and clean **Date / Time / DateTime / Range Picker** component for React Native. Built as part of the Atom Design System, with full support for both iOS and Android.\n\nSupports:\n- Single Date\n- Time Picker\n- DateTime Picker (with Android fallback handling)\n- Date Range Selection\n\n---\n\n## 🚀 Installation\n\nInstall using npm:\n\n```bash\nnpm install @atom-design-mog/datepicker\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/datepicker\n```\n\n### 📦 Peer Dependency\nThis package requires the native datetime picker:\n\n```bash\nnpm install @react-native-community/datetimepicker\n# or\npnpm add @react-native-community/datetimepicker\n```\n\n---\n\n## 📸 Features\n\n- 📅 Single date selection\n- 🕒 Time selection\n- 📆 DateTime picker (full on iOS, fallback flow on Android)\n- 🔁 Date range selection (start → end flow)\n- ⚙ Fully controlled component\n- 🚫 Disabled state support\n- 💬 Helper / hint text\n- 🧩 Clean Atom-style UI\n- 🗓 Auto formatting for date / time / datetime displays\n\n---\n\n## 🎨 Usage Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { ScrollView, View } from 'react-native';\nimport DatePicker from '@atom-design-mog/datepicker';\n\nexport default function TestDatePickersScreen() {\n  const [singleDate, setSingleDate] = useState(null);\n  const [dateRange, setDateRange] = useState({ start: null, end: null });\n  const [dateTime, setDateTime] = useState(null);\n  const [time, setTime] = useState(null);\n\n  return (\n    <ScrollView style={{ flex: 1 }}>\n      <View style={{ padding: 20, gap: 20 }}>\n        <DatePicker\n          label=\"Single Date Picker\"\n          placeholder=\"Select date\"\n          value={singleDate}\n          onChange={setSingleDate}\n          hint=\"MM/DD/YYYY\"\n        />\n\n        <DatePicker\n          type=\"range\"\n          label=\"Date Range Picker\"\n          placeholder=\"Select date range\"\n          value={dateRange}\n          onChange={setDateRange}\n          hint=\"MM/DD/YYYY – MM/DD/YYYY\"\n        />\n\n        <DatePicker\n          type=\"datetime\"\n          label=\"Date Time Picker\"\n          placeholder=\"Choose a date\"\n          value={dateTime}\n          onChange={setDateTime}\n        />\n\n        <DatePicker\n          type=\"time\"\n          label=\"Time Picker\"\n          placeholder=\"Select time\"\n          value={time}\n          onChange={setTime}\n        />\n\n        <DatePicker\n          label=\"Disabled Date Picker\"\n          placeholder=\"Select date\"\n          disabled\n        />\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n---\n\n## 🔧 Props API\n\n| Prop            | Type                                        | Default         | Description                                          |\n| --------------- | ------------------------------------------- | --------------- | ---------------------------------------------------- |\n| **type**        | `\"date\" \\| \"time\" \\| \"datetime\" \\| \"range\"` | `\"date\"`        | Type of picker to open                               |\n| **label**       | `string`                                    | —               | Top label above the input                            |\n| **placeholder** | `string`                                    | `\"Select date\"` | Placeholder text                                     |\n| **value**       | varies                                      | `null`          | Selected value (`Date`, or `{start, end}` for range) |\n| **onChange**    | `(value) => void`                           | —               | Returns updated date/time/range                      |\n| **disabled**    | `boolean`                                   | `false`         | Disables the picker                                  |\n| **hint**        | `string`                                    | —               | Displays helper text below                           |\n| **...props**    | props passed to DateTimePicker              | —               | Additional native picker props                       |\n\n\n---\n\n## 🧠 Component Behavior\n\n- Date (default): returns a single `Date` object.\n- Range: two-step selection (start → end). Returns `{ start: Date, end: Date }`.\n- Time: returns a `Date` object representing the selected time.\n- DateTime:\n  - iOS: opens full datetime picker.\n  - Android: fallback two-step flow (date then time); component combines both into a single `Date`.\n\n## 📄 Formatting\nDisplays are formatted using the locale `en-US`:\n\n- `toLocaleDateString('en-US')`\n- `toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })`\n- `toLocaleString('en-US')`\n\n## 🎛 Styles Included\n\n- Bordered input field\n- Inline calendar / clock icon\n- Disabled UI styling\n- Label + hint text\n- Atom Design-based visual treatment\n\n---\n\n## 📝 Notes\n\n- Always provide date strings/objects in a consistent format when wiring to external systems.\n- For range mode, the component expects `value` to be an object: `{ start: Date|null, end: Date|null }`.\n- On Android, the `datetime` type uses a two-step picker (date → time). The component merges both steps before calling `onChange`.\n- Ensure `@react-native-community/datetimepicker` is installed and properly linked in native projects.\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}