{"_id":"@atom_design/datepicker","name":"@atom_design/datepicker","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/datepicker","version":"1.0.0","description":"A versatile React Native DatePicker component supporting date, time, datetime, and range selection with full accessibility.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","datepicker","datetime","range","time","calendar","date-range","accessibility","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","@react-native-community/datetimepicker":">=6.0.0","prop-types":">=15.0.0","react-native-vector-icons":">=9.0.0"},"_id":"@atom_design/datepicker@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-sOiJyLGvGEBFtVmHzWce1t1fLRuVEKG+rZXz6Q5y7q5Aunf/HIY/vMrpzPrEsu1T70HsZsoA9km0N7eOvp4r3g==","shasum":"c12ea10dd4a93cdcb51d8b4569bafdb32d869338","tarball":"https://registry.npmjs.org/@atom_design/datepicker/-/datepicker-1.0.0.tgz","fileCount":5,"unpackedSize":28311,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC/TMJrpZr6JE1ZwTSMMS8qZU81j63orZd93EMhemtP5AiAsCt2zOO7TGMoCO/w44xD/EFMiAw3mgS2es8ShJXDMTA=="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datepicker_1.0.0_1764757063931_0.33479358667969805"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T10:17:43.857Z","1.0.0":"2025-12-03T10:17:44.088Z","modified":"2025-12-03T10:17:44.447Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A versatile React Native DatePicker component supporting date, time, datetime, and range selection with full accessibility.","keywords":["react-native","datepicker","datetime","range","time","calendar","date-range","accessibility","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/datepicker\n\nA powerful and flexible **Date/Time/DateTime/Range Picker** component for React Native. Built as part of the **Atom Design System** with full support for iOS and Android platforms.\n\n---\n\n## ✨ Features\n\n- 📅 **Single Date Selection** - Standard date picker\n- 🕒 **Time Selection** - Hour and minute picker\n- 📆 **DateTime Picker** - Combined date and time (iOS native, Android fallback)\n- 🔁 **Date Range Selection** - Start and end date flow\n- 🎨 **Customizable Styling** - Colors, sizes, and custom styles\n- ♿ **Fully Accessible** - Screen reader support with proper roles\n- 📱 **Platform Optimized** - iOS inline picker, Android modal picker\n- 🔒 **Min/Max Date Support** - Restrict selectable dates\n- ⚠️ **Error States** - Visual validation feedback\n- 🎯 **TypeScript Support** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/datepicker\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom_design/datepicker\n```\n\n### Peer Dependencies\n\nMake sure you have the required peer dependencies installed:\n\n```bash\nnpm install @react-native-community/datetimepicker react-native-vector-icons prop-types\n```\n\nFor native setup:\n- **@react-native-community/datetimepicker**: Follow the [installation guide](https://github.com/react-native-datetimepicker/datetimepicker#installation)\n- **react-native-vector-icons**: Follow the [installation guide](https://github.com/oblador/react-native-vector-icons#installation)\n\n---\n\n## 📥 Import\n\n```javascript\nimport DatePicker from '@atom_design/datepicker';\n// or\nimport { DatePicker } from '@atom_design/datepicker';\n```\n\n---\n\n## 🎯 Basic Usage\n\n### Single Date Picker\n\n```jsx\nimport React, { useState } from 'react';\nimport DatePicker from '@atom_design/datepicker';\n\nfunction DateExample() {\n  const [date, setDate] = useState(null);\n\n  return (\n    <DatePicker\n      label=\"Birth Date\"\n      placeholder=\"Select your birth date\"\n      value={date}\n      onChange={setDate}\n      hint=\"MM/DD/YYYY\"\n    />\n  );\n}\n```\n\n### Time Picker\n\n```jsx\nimport React, { useState } from 'react';\nimport DatePicker from '@atom_design/datepicker';\n\nfunction TimeExample() {\n  const [time, setTime] = useState(null);\n\n  return (\n    <DatePicker\n      type=\"time\"\n      label=\"Appointment Time\"\n      placeholder=\"Select time\"\n      value={time}\n      onChange={setTime}\n    />\n  );\n}\n```\n\n### DateTime Picker\n\n```jsx\nimport React, { useState } from 'react';\nimport DatePicker from '@atom_design/datepicker';\n\nfunction DateTimeExample() {\n  const [datetime, setDatetime] = useState(null);\n\n  return (\n    <DatePicker\n      type=\"datetime\"\n      label=\"Event Date & Time\"\n      placeholder=\"Select date and time\"\n      value={datetime}\n      onChange={setDatetime}\n    />\n  );\n}\n```\n\n### Date Range Picker\n\n```jsx\nimport React, { useState } from 'react';\nimport DatePicker from '@atom_design/datepicker';\n\nfunction RangeExample() {\n  const [range, setRange] = useState({ start: null, end: null });\n\n  return (\n    <DatePicker\n      type=\"range\"\n      label=\"Travel Dates\"\n      placeholder=\"Select date range\"\n      value={range}\n      onChange={setRange}\n      hint=\"Start date – End date\"\n    />\n  );\n}\n```\n\n---\n\n## 📋 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `'date' \\| 'time' \\| 'datetime' \\| 'range'` | `'date'` | Type of picker to display |\n| `label` | `string` | - | Label text above the input |\n| `placeholder` | `string` | `'Select date'` | Placeholder text |\n| `value` | `Date \\| string \\| { start, end }` | - | Current value |\n| `onChange` | `function` | - | Callback when value changes |\n| `disabled` | `boolean` | `false` | Disable the picker |\n| `error` | `boolean` | `false` | Show error state styling |\n| `hint` | `string` | - | Helper text below input |\n| `size` | `'small' \\| 'medium' \\| 'large'` | `'medium'` | Size variant |\n| `minDate` | `Date \\| string` | - | Minimum selectable date |\n| `maxDate` | `Date \\| string` | - | Maximum selectable date |\n| `activeColor` | `string` | `'#d9232d'` | Icon accent color |\n| `dateFormat` | `string` | `'en-US'` | Locale for date formatting |\n| `containerStyle` | `ViewStyle` | - | Container style override |\n| `inputStyle` | `ViewStyle` | - | Input container style |\n| `labelStyle` | `TextStyle` | - | Label text style |\n| `testID` | `string` | - | Test ID for testing |\n| `accessibilityLabel` | `string` | - | Accessibility label |\n\n---\n\n## 🎨 Customization Examples\n\n### With Min/Max Dates\n\n```jsx\n<DatePicker\n  label=\"Appointment Date\"\n  value={date}\n  onChange={setDate}\n  minDate={new Date()} // Can't select past dates\n  maxDate={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)} // Next 30 days only\n/>\n```\n\n### Custom Colors\n\n```jsx\n<DatePicker\n  label=\"Event Date\"\n  value={date}\n  onChange={setDate}\n  activeColor=\"#4CAF50\"\n/>\n```\n\n### Different Sizes\n\n```jsx\n// Small\n<DatePicker label=\"Small\" value={date} onChange={setDate} size=\"small\" />\n\n// Large\n<DatePicker label=\"Large\" value={date} onChange={setDate} size=\"large\" />\n```\n\n### Error State\n\n```jsx\n<DatePicker\n  label=\"Required Date\"\n  value={date}\n  onChange={setDate}\n  error={!date}\n  hint={!date ? \"Please select a date\" : \"\"}\n/>\n```\n\n### Custom Date Format\n\n```jsx\n<DatePicker\n  label=\"Date (UK Format)\"\n  value={date}\n  onChange={setDate}\n  dateFormat=\"en-GB\"\n/>\n```\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView, StyleSheet } from 'react-native';\nimport DatePicker from '@atom_design/datepicker';\n\nconst DatePickerTestScreen = () => {\n  // States for different picker types\n  const [singleDate, setSingleDate] = useState(null);\n  const [time, setTime] = useState(null);\n  const [datetime, setDatetime] = useState(null);\n  const [dateRange, setDateRange] = useState({ start: null, end: null });\n  \n  // States for variations\n  const [minMaxDate, setMinMaxDate] = useState(null);\n  const [errorDate, setErrorDate] = useState(null);\n\n  // Calculate min/max dates\n  const today = new Date();\n  const nextMonth = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);\n\n  return (\n    <ScrollView style={styles.container}>\n      <Text style={styles.header}>Atom Design - DatePicker</Text>\n\n      {/* Single Date Picker */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Single Date Picker</Text>\n        <DatePicker\n          label=\"Birth Date\"\n          placeholder=\"Select your birth date\"\n          value={singleDate}\n          onChange={setSingleDate}\n          hint=\"MM/DD/YYYY format\"\n        />\n        <Text style={styles.result}>\n          Selected: {singleDate ? singleDate.toLocaleDateString() : 'None'}\n        </Text>\n      </View>\n\n      {/* Time Picker */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Time Picker</Text>\n        <DatePicker\n          type=\"time\"\n          label=\"Appointment Time\"\n          placeholder=\"Select time\"\n          value={time}\n          onChange={setTime}\n        />\n        <Text style={styles.result}>\n          Selected: {time ? time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'None'}\n        </Text>\n      </View>\n\n      {/* DateTime Picker */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>DateTime Picker</Text>\n        <Text style={styles.description}>\n          iOS: Native datetime picker | Android: Two-step flow\n        </Text>\n        <DatePicker\n          type=\"datetime\"\n          label=\"Event Date & Time\"\n          placeholder=\"Select date and time\"\n          value={datetime}\n          onChange={setDatetime}\n        />\n        <Text style={styles.result}>\n          Selected: {datetime ? datetime.toLocaleString() : 'None'}\n        </Text>\n      </View>\n\n      {/* Date Range Picker */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Date Range Picker</Text>\n        <Text style={styles.description}>Two-step selection: Start → End</Text>\n        <DatePicker\n          type=\"range\"\n          label=\"Travel Dates\"\n          placeholder=\"Select date range\"\n          value={dateRange}\n          onChange={setDateRange}\n          hint=\"Select start and end dates\"\n        />\n        <Text style={styles.result}>\n          Start: {dateRange.start ? dateRange.start.toLocaleDateString() : 'Not set'}{'\\n'}\n          End: {dateRange.end ? dateRange.end.toLocaleDateString() : 'Not set'}\n        </Text>\n      </View>\n\n      {/* Min/Max Date Restriction */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>With Min/Max Dates</Text>\n        <Text style={styles.description}>Restricted to next 30 days</Text>\n        <DatePicker\n          label=\"Booking Date\"\n          placeholder=\"Select a date\"\n          value={minMaxDate}\n          onChange={setMinMaxDate}\n          minDate={today}\n          maxDate={nextMonth}\n          hint=\"Only future dates within 30 days\"\n        />\n      </View>\n\n      {/* Size Variants */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Size Variants</Text>\n        \n        <DatePicker\n          label=\"Small Size\"\n          placeholder=\"Small picker\"\n          value={null}\n          onChange={() => {}}\n          size=\"small\"\n        />\n        \n        <View style={{ height: 12 }} />\n        \n        <DatePicker\n          label=\"Medium Size (Default)\"\n          placeholder=\"Medium picker\"\n          value={null}\n          onChange={() => {}}\n          size=\"medium\"\n        />\n        \n        <View style={{ height: 12 }} />\n        \n        <DatePicker\n          label=\"Large Size\"\n          placeholder=\"Large picker\"\n          value={null}\n          onChange={() => {}}\n          size=\"large\"\n        />\n      </View>\n\n      {/* Error State */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Error State</Text>\n        <DatePicker\n          label=\"Required Date\"\n          placeholder=\"This field is required\"\n          value={errorDate}\n          onChange={setErrorDate}\n          error={!errorDate}\n          hint={!errorDate ? \"Please select a date\" : \"Date selected\"}\n        />\n      </View>\n\n      {/* Disabled State */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Disabled State</Text>\n        <DatePicker\n          label=\"Unavailable Date\"\n          placeholder=\"Cannot select\"\n          value={new Date()}\n          onChange={() => {}}\n          disabled\n          hint=\"This picker is disabled\"\n        />\n      </View>\n\n      {/* Custom Color */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Custom Active Color</Text>\n        <DatePicker\n          label=\"Appointment Date\"\n          placeholder=\"Select date\"\n          value={null}\n          onChange={() => {}}\n          activeColor=\"#4CAF50\"\n        />\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F5F5F5',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginVertical: 20,\n    color: '#1A1A1A',\n  },\n  section: {\n    backgroundColor: '#FFFFFF',\n    marginHorizontal: 16,\n    marginBottom: 16,\n    padding: 16,\n    borderRadius: 12,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginBottom: 12,\n    color: '#1A1A1A',\n  },\n  description: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 12,\n  },\n  result: {\n    marginTop: 12,\n    fontSize: 14,\n    color: '#d9232d',\n    fontStyle: 'italic',\n  },\n});\n\nexport default DatePickerTestScreen;\n```\n\n---\n\n## 🧠 Platform Behavior\n\n### iOS\n- **Date/Time**: Opens native inline picker\n- **DateTime**: Opens combined datetime picker\n- **Range**: Two-step selection with native picker\n\n### Android\n- **Date/Time**: Opens modal picker\n- **DateTime**: Two-step flow (date picker → time picker), automatically combined\n- **Range**: Two-step selection with modal picker\n\n---\n\n## ♿ Accessibility\n\nThe DatePicker component includes comprehensive accessibility support:\n\n- Uses `accessibilityRole=\"button\"` for the input\n- Supports custom `accessibilityLabel`\n- Provides `accessibilityHint` with usage instructions\n- Reports disabled state via `accessibilityState`\n- Screen reader friendly value announcements\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript definitions are included:\n\n```typescript\nimport DatePicker, { DatePickerProps, DateRange } from '@atom_design/datepicker';\n\nconst MyComponent: React.FC = () => {\n  const [date, setDate] = useState<Date | null>(null);\n  const [range, setRange] = useState<DateRange>({ start: null, end: null });\n\n  return (\n    <>\n      <DatePicker\n        type=\"date\"\n        label=\"Single Date\"\n        value={date}\n        onChange={setDate}\n      />\n      <DatePicker\n        type=\"range\"\n        label=\"Date Range\"\n        value={range}\n        onChange={setRange}\n      />\n    </>\n  );\n};\n```\n\n---\n\n## 📄 License\n\nMIT © Atom Design\n\n---\n\n## 👤 Author\n\n**Atom Design Team**\n\nPart of the Atom Design System for React Native.\n","readmeFilename":"README.md","_rev":"1-585c9a4a10ba70d61990ff91c6e33e24"}