@atom-design-mog/datepicker

A 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.

Supports:

• Single Date
• Time Picker
• DateTime Picker (with Android fallback handling)
• Date Range Selection

🚀 Installation

Install using npm:

npm install @atom-design-mog/datepicker

Or with yarn:

yarn add @atom-design-mog/datepicker

📦 Peer Dependency

This package requires the native datetime picker:

npm install @react-native-community/datetimepicker
# or
pnpm add @react-native-community/datetimepicker

📸 Features

• 📅 Single date selection
• 🕒 Time selection
• 📆 DateTime picker (full on iOS, fallback flow on Android)
• 🔁 Date range selection (start → end flow)
• ⚙ Fully controlled component
• 🚫 Disabled state support
• 💬 Helper / hint text
• 🧩 Clean Atom-style UI
• 🗓 Auto formatting for date / time / datetime displays

🎨 Usage Example

import React, { useState } from 'react';
import { ScrollView, View } from 'react-native';
import DatePicker from '@atom-design-mog/datepicker';

export default function TestDatePickersScreen() {
  const [singleDate, setSingleDate] = useState(null);
  const [dateRange, setDateRange] = useState({ start: null, end: null });
  const [dateTime, setDateTime] = useState(null);
  const [time, setTime] = useState(null);

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 20 }}>
        <DatePicker
          label="Single Date Picker"
          placeholder="Select date"
          value={singleDate}
          onChange={setSingleDate}
          hint="MM/DD/YYYY"
        />

        <DatePicker
          type="range"
          label="Date Range Picker"
          placeholder="Select date range"
          value={dateRange}
          onChange={setDateRange}
          hint="MM/DD/YYYY – MM/DD/YYYY"
        />

        <DatePicker
          type="datetime"
          label="Date Time Picker"
          placeholder="Choose a date"
          value={dateTime}
          onChange={setDateTime}
        />

        <DatePicker
          type="time"
          label="Time Picker"
          placeholder="Select time"
          value={time}
          onChange={setTime}
        />

        <DatePicker
          label="Disabled Date Picker"
          placeholder="Select date"
          disabled
        />
      </View>
    </ScrollView>
  );
}

🔧 Props API

| Prop | Type | Default | Description | | --------------- | ------------------------------------------- | --------------- | ---------------------------------------------------- | | type | "date" \| "time" \| "datetime" \| "range" | "date" | Type of picker to open | | label | string | — | Top label above the input | | placeholder | string | "Select date" | Placeholder text | | value | varies | null | Selected value (Date, or {start, end} for range) | | onChange | (value) => void | — | Returns updated date/time/range | | disabled | boolean | false | Disables the picker | | hint | string | — | Displays helper text below | | ...props | props passed to DateTimePicker | — | Additional native picker props |

🧠 Component Behavior

• Date (default): returns a single Date object.
• Range: two-step selection (start → end). Returns { start: Date, end: Date }.
• Time: returns a Date object representing the selected time.
• DateTime:
  • iOS: opens full datetime picker.
  • Android: fallback two-step flow (date then time); component combines both into a single Date.

📄 Formatting

Displays are formatted using the locale en-US:

• toLocaleDateString('en-US')
• toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
• toLocaleString('en-US')

🎛 Styles Included

• Bordered input field
• Inline calendar / clock icon
• Disabled UI styling
• Label + hint text
• Atom Design-based visual treatment

📝 Notes

• Always provide date strings/objects in a consistent format when wiring to external systems.
• For range mode, the component expects value to be an object: { start: Date|null, end: Date|null }.
• On Android, the datetime type uses a two-step picker (date → time). The component merges both steps before calling onChange.
• Ensure @react-native-community/datetimepicker is installed and properly linked in native projects.

👤 Author

Avi Gupta