@2_k/expo-2k-datetime-picker

The fastest fully customizable Expo date & time picker, written in TypeScript, supporting Expo Go, single date, time, date range, time range, datetime range selection, flexible date disabling, and dynamic color theming for iOS and Android.

Features

• 📅 Date picker — single date selection
• 🕐 Time picker — single time selection
• 📆 Date range picker — select a start and end date
• ⏱️ Time range picker — select a start and end time
• 🗓️ Datetime & datetime range — combined date and time selection
• 🚫 Flexible date disabling — disable specific days by custom logic
• 🎨 Dynamic color theming — fully customizable accent color
• 💙 Expo Go support — works out of the box with Expo Go
• 📘 Fully written in TypeScript

Installation

npx expo install @2_k/expo-2k-datetime-picker

Preview

| Date | Time | | ----------------------------------------------- | ----------------------------------------------- | | | |

| Datetime Range | Time Range | | -------------------------------------------------- | ---------------------------------------------- | | | |

Usage

Example 1 — Date Picker

Single date selection with disabled days (Sunday, Wednesday, Saturday).

import { DateValueType } from "@2_k/expo-2k-datetime-picker";
import Calendar2kView from "@2_k/expo-2k-datetime-picker";
import { useState } from "react";

export default function App() {
  const [date, setDate] = useState<DateValueType>(new Date());

  return (
    <Calendar2kView
      onChangeDate={setDate}
      value={date}
      mode="date"
      color="black"
      disableDate={(date) => [0, 3, 6].includes(date.getDay())}
    />
  );
}

Example 2 — Datetime Picker

Combined date and time selection in a single picker.

import { DateValueType } from "@2_k/expo-2k-datetime-picker";
import Calendar2kView from "@2_k/expo-2k-datetime-picker";
import { useState } from "react";

export default function App() {
  const [date, setDate] = useState<DateValueType>(new Date());

  return (
    <Calendar2kView
      onChangeDate={setDate}
      value={date}
      mode="datetime"
      color="black"
      disableDate={(date) => [0, 3, 6].includes(date.getDay())}
    />
  );
}

Example 3 — Datetime Range Picker

Select a start and end datetime, useful for bookings and reservations.

import { DateValueType } from "@2_k/expo-2k-datetime-picker";
import Calendar2kView from "@2_k/expo-2k-datetime-picker";
import { useState } from "react";

export default function App() {
  const [date, setDate] = useState<DateValueType>({
    start: new Date(),
    end: new Date(),
  });

  return (
    <Calendar2kView
      onChangeDate={setDate}
      value={date}
      mode="datetime"
      color="black"
      disableDate={(date) => [0, 3, 6].includes(date.getDay())}
    />
  );
}

Example 4 — Time Range Picker

Select a start and end time, useful for timetable.

import { DateValueType } from "@2_k/expo-2k-datetime-picker";
import Calendar2kView from "@2_k/expo-2k-datetime-picker";
import { useState } from "react";

export default function App() {
  const [date, setDate] = useState<DateValueType>({
    start: "09:00:00",
    end: "10:00:00",
  });

  return (
    <Calendar2kView
      onChangeDate={setDate}
      value={date}
      mode="time"
      color="black"
    />
  );
}

Props

| Prop | Type | Required | Description | | --------------- | ------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | onChangeDate | (value: DateValueType) => void | ❌ | Callback fired when the user selects a date or range | | value | DateValueType | ❌ | Current selected value — a Date or { start: Date, end: Date } or HH:MM:SS or { start: 'HH:MM:SS', end: 'HH:MM:SS' } object | | locales | Intl.LocalesArgument | ❌ | Locale for displaying month/day names and time format (e.g. "fr", "en-US"). Defaults to device locale | | mode | "date" \| "time" \| "datetime" | ❌ | Picker mode | | color | string | ❌ | Accent color for the picker UI (any valid CSS/RN color) | | min | Date | ❌ | Earliest selectable date — all dates before this are automatically disabled | | max | Date | ❌ | Latest selectable date — all dates after this are automatically disabled | | disableDate | (date: Date) => boolean | ❌ | Function to disable specific dates — return true to disable | | placeholder | string | ❌ | Text shown in the trigger button when no date is selected yet | | customTrigger | (onToggle: () => void) => React.ReactNode | ❌ | Custom element to replace the default trigger button | | disabled | boolean | ❌ | Disables the entire picker — the trigger becomes non-interactive |

Modes

| Mode | value type | Description | | ---------- | -------------------------- | ------------------------- | | date | Date or { start, end } | Pick a date or a range | | time | Date or { start, end } | Pick a time or a range | | datetime | Date or { start, end } | Pick date+time or a range |

Disabling Dates

Pass a function to disableDate that receives a Date and returns true to disable it:

// Disable weekends (Saturday = 6, Sunday = 0)
disableDate={(date) => [0, 6].includes(date.getDay())}

// Disable past dates
disableDate={(date) => date < new Date()}

// Disable a specific date
disableDate={(date) => date.toDateString() === new Date("2025-12-25").toDateString()}

You can also use min and max for simpler range-based disabling:

// Only allow dates in 2025
<Calendar2kView
  min={new Date("2025-01-01")}
  max={new Date("2025-12-31")}
  ...
/>

Platform Support

| Platform | Supported | | -------- | -------------- | | iOS | ✅ | | Android | ✅ | | Expo Go | ✅ | | Web | 🚧 Coming soon |

Support & Donation

If @2_k/expo-2k-datetime-picker saved you time, consider buying me a coffee! ☕
Your support helps me maintain this project and build more free open-source tools. 🙏

💛 Donate via Orange Money (Madagascar)

Send your donation directly to:

my Orange Money 📱 +261 37 65 442 50

Or Mvola 📱 +261 34 68 814 74

Or Airtel Money 📱 +261 33 36 613 20

Any amount is deeply appreciated! 🤝

MIT