@hitesh0009/react-native-datetime-picker 1.0.0

package/package.json

@@ -0,0 +1,265 @@
+{
+  "name": "@hitesh0009/react-native-datetime-picker",
+  "version": "1.0.0",
+  "description": "A fully customizable wheel-based Date & Time picker for React Native with dynamic month handling, infinite scrolling wheels, and optional start/end date clamping.",
+  "keywords": [
+    "react-native",
+    "react-native-date-picker",
+    "react-native-time-picker",
+    "react-native-wheel-picker",
+    "react-native-wheel-date-picker",
+    "react-native-datetime-picker",
+    "react-native-scroll-picker",
+    "react-native-infinite-scroll",
+    "wheel-picker",
+    "date-time",
+    "datetime",
+    "calendar",
+    "custom-date-picker",
+    "mobile-ui",
+    "react-native-ui"
+  ],
+  "homepage": "https://github.com/hiteshjangir0009/react-native-datetime-picker#readme",
+  "bugs": {
+    "url": "https://github.com/hiteshjangir0009/react-native-datetime-picker/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hiteshjangir0009/react-native-datetime-picker.git"
+  },
+  "license": "MIT",
+  "author": "Hitesh Jangir",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "abort-controller": "^3.0.0",
+    "accepts": "^1.3.8",
+    "acorn": "^8.15.0",
+    "agent-base": "^7.1.4",
+    "anser": "^1.4.10",
+    "ansi-regex": "^5.0.1",
+    "ansi-styles": "^4.3.0",
+    "anymatch": "^3.1.3",
+    "argparse": "^1.0.10",
+    "asap": "^2.0.6",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-istanbul": "^6.1.1",
+    "babel-plugin-jest-hoist": "^29.6.3",
+    "babel-plugin-syntax-hermes-parser": "^0.32.0",
+    "babel-preset-current-node-syntax": "^1.2.0",
+    "babel-preset-jest": "^29.6.3",
+    "balanced-match": "^1.0.2",
+    "base64-js": "^1.5.1",
+    "baseline-browser-mapping": "^2.9.19",
+    "brace-expansion": "^1.1.12",
+    "braces": "^3.0.3",
+    "browserslist": "^4.28.1",
+    "bser": "^2.1.1",
+    "buffer-from": "^1.1.2",
+    "camelcase": "^5.3.1",
+    "caniuse-lite": "^1.0.30001769",
+    "chalk": "^4.1.2",
+    "chrome-launcher": "^0.15.2",
+    "chromium-edge-launcher": "^0.2.0",
+    "ci-info": "^3.9.0",
+    "cliui": "^8.0.1",
+    "color-convert": "^2.0.1",
+    "color-name": "^1.1.4",
+    "commander": "^12.1.0",
+    "concat-map": "^0.0.1",
+    "connect": "^3.7.0",
+    "convert-source-map": "^2.0.0",
+    "cross-spawn": "^7.0.6",
+    "csstype": "^3.2.3",
+    "debug": "^4.4.3",
+    "depd": "^2.0.0",
+    "destroy": "^1.2.0",
+    "ee-first": "^1.1.1",
+    "electron-to-chromium": "^1.5.286",
+    "emoji-regex": "^8.0.0",
+    "encodeurl": "^1.0.2",
+    "error-stack-parser": "^2.1.4",
+    "escalade": "^3.2.0",
+    "escape-html": "^1.0.3",
+    "escape-string-regexp": "^4.0.0",
+    "esprima": "^4.0.1",
+    "etag": "^1.8.1",
+    "event-target-shim": "^5.0.1",
+    "exponential-backoff": "^3.1.3",
+    "fast-json-stable-stringify": "^2.1.0",
+    "fb-dotslash": "^0.5.8",
+    "fb-watchman": "^2.0.2",
+    "fill-range": "^7.1.1",
+    "finalhandler": "^1.1.2",
+    "find-up": "^4.1.0",
+    "flow-enums-runtime": "^0.0.6",
+    "fresh": "^0.5.2",
+    "fs.realpath": "^1.0.0",
+    "gensync": "^1.0.0-beta.2",
+    "get-caller-file": "^2.0.5",
+    "get-package-type": "^0.1.0",
+    "glob": "^7.2.3",
+    "graceful-fs": "^4.2.11",
+    "has-flag": "^4.0.0",
+    "hermes-compiler": "^250829098.0.7",
+    "hermes-estree": "^0.32.0",
+    "hermes-parser": "^0.32.0",
+    "http-errors": "^2.0.1",
+    "https-proxy-agent": "^7.0.6",
+    "image-size": "^1.2.1",
+    "imurmurhash": "^0.1.4",
+    "inflight": "^1.0.6",
+    "inherits": "^2.0.4",
+    "invariant": "^2.2.4",
+    "is-docker": "^2.2.1",
+    "is-fullwidth-code-point": "^3.0.0",
+    "is-number": "^7.0.0",
+    "is-wsl": "^2.2.0",
+    "isexe": "^2.0.0",
+    "istanbul-lib-coverage": "^3.2.2",
+    "istanbul-lib-instrument": "^5.2.1",
+    "jest-environment-node": "^29.7.0",
+    "jest-get-type": "^29.6.3",
+    "jest-haste-map": "^29.7.0",
+    "jest-message-util": "^29.7.0",
+    "jest-mock": "^29.7.0",
+    "jest-regex-util": "^29.6.3",
+    "jest-util": "^29.7.0",
+    "jest-validate": "^29.7.0",
+    "jest-worker": "^29.7.0",
+    "js-tokens": "^4.0.0",
+    "js-yaml": "^3.14.2",
+    "jsc-safe-url": "^0.2.4",
+    "jsesc": "^3.1.0",
+    "json5": "^2.2.3",
+    "leven": "^3.1.0",
+    "lighthouse-logger": "^1.4.2",
+    "locate-path": "^5.0.0",
+    "lodash.throttle": "^4.1.1",
+    "loose-envify": "^1.4.0",
+    "lru-cache": "^5.1.1",
+    "makeerror": "^1.0.12",
+    "marky": "^1.3.0",
+    "memoize-one": "^5.2.1",
+    "merge-stream": "^2.0.0",
+    "metro": "^0.83.3",
+    "metro-babel-transformer": "^0.83.3",
+    "metro-cache": "^0.83.3",
+    "metro-cache-key": "^0.83.3",
+    "metro-config": "^0.83.3",
+    "metro-core": "^0.83.3",
+    "metro-file-map": "^0.83.3",
+    "metro-minify-terser": "^0.83.3",
+    "metro-resolver": "^0.83.3",
+    "metro-runtime": "^0.83.3",
+    "metro-source-map": "^0.83.3",
+    "metro-symbolicate": "^0.83.3",
+    "metro-transform-plugins": "^0.83.3",
+    "metro-transform-worker": "^0.83.3",
+    "micromatch": "^4.0.8",
+    "mime": "^1.6.0",
+    "mime-db": "^1.52.0",
+    "mime-types": "^2.1.35",
+    "minimatch": "^3.1.2",
+    "mkdirp": "^1.0.4",
+    "ms": "^2.1.3",
+    "negotiator": "^0.6.3",
+    "node-int64": "^0.4.0",
+    "node-releases": "^2.0.27",
+    "normalize-path": "^3.0.0",
+    "nullthrows": "^1.1.1",
+    "ob1": "^0.83.3",
+    "on-finished": "^2.3.0",
+    "once": "^1.4.0",
+    "open": "^7.4.2",
+    "p-limit": "^2.3.0",
+    "p-locate": "^4.1.0",
+    "p-try": "^2.2.0",
+    "parseurl": "^1.3.3",
+    "path-exists": "^4.0.0",
+    "path-is-absolute": "^1.0.1",
+    "path-key": "^3.1.1",
+    "picocolors": "^1.1.1",
+    "picomatch": "^2.3.1",
+    "pirates": "^4.0.7",
+    "pretty-format": "^29.7.0",
+    "promise": "^8.3.0",
+    "queue": "^6.0.2",
+    "range-parser": "^1.2.1",
+    "react": ">=17",
+    "react-devtools-core": "^6.1.5",
+    "react-is": "^18.3.1",
+    "react-refresh": "^0.14.2",
+    "regenerator-runtime": "^0.13.11",
+    "require-directory": "^2.1.1",
+    "resolve-from": "^5.0.0",
+    "rimraf": "^3.0.2",
+    "scheduler": "^0.27.0",
+    "semver": "^7.7.4",
+    "send": "^0.19.2",
+    "serialize-error": "^2.1.0",
+    "serve-static": "^1.16.3",
+    "setprototypeof": "^1.2.0",
+    "shebang-command": "^2.0.0",
+    "shebang-regex": "^3.0.0",
+    "shell-quote": "^1.8.3",
+    "signal-exit": "^3.0.7",
+    "slash": "^3.0.0",
+    "source-map": "^0.5.7",
+    "source-map-support": "^0.5.21",
+    "sprintf-js": "^1.0.3",
+    "stack-utils": "^2.0.6",
+    "stackframe": "^1.3.4",
+    "stacktrace-parser": "^0.1.11",
+    "statuses": "^1.5.0",
+    "string-width": "^4.2.3",
+    "strip-ansi": "^6.0.1",
+    "supports-color": "^7.2.0",
+    "terser": "^5.46.0",
+    "test-exclude": "^6.0.0",
+    "throat": "^5.0.0",
+    "tinyglobby": "^0.2.15",
+    "tmpl": "^1.0.5",
+    "to-regex-range": "^5.0.1",
+    "toidentifier": "^1.0.1",
+    "type-detect": "^4.0.8",
+    "type-fest": "^0.7.1",
+    "undici-types": "^7.16.0",
+    "unpipe": "^1.0.0",
+    "update-browserslist-db": "^1.2.3",
+    "utils-merge": "^1.0.1",
+    "vlq": "^1.0.1",
+    "walker": "^1.0.8",
+    "whatwg-fetch": "^3.6.20",
+    "which": "^2.0.2",
+    "wrap-ansi": "^7.0.0",
+    "wrappy": "^1.0.2",
+    "write-file-atomic": "^4.0.2",
+    "ws": "^7.5.10",
+    "y18n": "^5.0.8",
+    "yallist": "^3.1.1",
+    "yaml": "^2.8.2",
+    "yargs": "^17.7.2",
+    "yargs-parser": "^21.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "react-native": "*",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-native": ">=0.70"
+  }
+}

package/src/Components/Wheel.tsx

@@ -0,0 +1,172 @@
+import { FlatList, StyleSheet, Text, View } from "react-native";
+import React, { useState, useEffect, forwardRef, useRef } from "react";
+import { Month_name, Week_name } from "../Utils/month_name";
+import { WheelProps } from "../types";
+
+const Wheel = <T extends number | string>({
+  data,
+  onChange,
+  value,
+  type,
+  height,
+  numRows,
+  centerItem,
+  textSizeActive,
+  textSizeInActive,
+  textWeightActive,
+  textWeightInActive,
+  fontFamily,
+  repeat,
+  format,
+  year,
+  month,
+}: WheelProps<T>) => {
+  const listref = useRef<FlatList<T> | null>(null);
+  const [Data, setData] = useState<T[]>(data);
+
+  useEffect(() => {
+    setData(data);
+  }, [data]);
+
+  useEffect(() => {
+    if (!listref.current) return;
+
+    const index = data.indexOf(value);
+    if (index >= 0) {
+      listref.current.scrollToIndex({
+        index,
+        animated: true,
+      });
+    }
+  }, [value]);
+  const selectedIndex = Data.indexOf(value);
+
+  const loadMore = () => {
+    setData((prev) => [...prev, ...data]);
+  };
+
+  const renderItem = (item: T): number | string => {
+    if (type === "day") {
+      if (format?.day === "alphabetical") {
+        const selectedYear = year || new Date().getFullYear();
+        const selectedMonth = month ? month - 1 : new Date().getMonth();
+
+        const dayvalue = item as number;
+
+        const dateObj = new Date(selectedYear, selectedMonth, dayvalue);
+        const dayIndex = dateObj.getDay();
+        const dayName = Week_name[dayIndex].shortName;
+
+        return `${dayName} ${item}`;
+      }
+
+      return item;
+    }
+
+    if (type === "month") {
+      const monthValue = item as number;
+      if (format?.month === "alphabeticalShort") {
+        const name = Month_name.find((e) => e.id === monthValue);
+        return name?.shortName || item;
+      }
+      if (format?.month === "alphabeticalLong") {
+        const name = Month_name.find((e) => e.id == item);
+        return name?.fullName || item;
+      }
+      return item;
+    }
+
+    if (type === "year") {
+      if (format?.year === "short") {
+        return String(item).slice(-2);
+      }
+      return item;
+    }
+
+    if (type === "hours") {
+      if (format?.hours === "hh") {
+        const result = String(item).padStart(2, "0");
+        return `${result} hrs`;
+      }
+      return `${item} hrs`;
+    }
+
+    if (type === "minutes") {
+      if (format?.minutes === "mm") {
+        const result = String(item).padStart(2, "0");
+        return `${result} min`;
+      }
+      return `${item} min`;
+    }
+
+    return item;
+  };
+
+  return (
+    <View
+      style={{
+        height: height * numRows,
+        width: data.length <= 2 ? 60 : undefined,
+        flex: data.length > 2 ? 1 : 0,
+      }}
+    >
+      <FlatList
+        ref={listref}
+        key={Data.length} // Force re-render when data length changes
+        data={Data}
+        bounces={false}
+        overScrollMode="never"
+        keyExtractor={(item, index) => `${type}-${item}-${index}`}
+        snapToInterval={height}
+        decelerationRate="fast"
+        showsVerticalScrollIndicator={false}
+        initialScrollIndex={Math.max(0, selectedIndex)}
+        onEndReached={repeat ? loadMore : null}
+        onEndReachedThreshold={0.7}
+        contentContainerStyle={{
+          paddingVertical: height * centerItem,
+        }}
+        getItemLayout={(_, index) => ({
+          length: height,
+          offset: height * index,
+          index,
+        })}
+        onMomentumScrollEnd={(e) => {
+          const index = Math.round(e.nativeEvent.contentOffset.y / height);
+          const nextValue = Data[index % data.length];
+          // if (isItemDisabled(nextValue)) return;
+          onChange?.(nextValue);
+        }}
+        renderItem={({ item }) => (
+          <View
+            style={{
+              height: height,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Text
+              style={{
+                // opacity: isItemDisabled(item) ? 0.25 : item === value ? 1 : 0.4,
+                fontFamily,
+                fontSize:
+                  item === value
+                    ? (textSizeActive ?? 18)
+                    : (textSizeInActive ?? 14),
+                opacity: item === value ? 1 : 0.31,
+                fontWeight:
+                  item === value
+                    ? (textWeightActive ?? "600")
+                    : (textWeightInActive ?? "400"),
+              }}
+            >
+              {renderItem(item)}
+            </Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+export default Wheel;

package/src/DataTimePicker.tsx

@@ -0,0 +1,270 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, { useEffect, useState, useMemo, useRef } from "react";
+import Wheel from "./Components/Wheel";
+import { DateTimePickerProps } from "./types";
+
+export const DateTimePicker = ({
+  start,
+  end,
+  initial,
+  selectorContainerStyle,
+  textSizeActive = 15,
+  textSizeInActive,
+  textWeightActive,
+  textWeightInActive,
+  fontFamily,
+  height = 44,
+  numRows = 5,
+  onChange,
+  format = {
+    day: "alphabetical",
+    month: "alphabeticalShort",
+    year: "short",
+    timeFormat: 24,
+    hours: "hh",
+    minutes: "mm",
+  },
+}: DateTimePickerProps) => {
+  const initialdate =
+    initial instanceof Date ? initial : new Date(initial ?? Date.now());
+  const minDate = start instanceof Date ? start : null;
+  const maxDate = end instanceof Date ? end : null;
+
+  const hours24 = initialdate.getHours();
+  const hours12 = hours24 % 12 || 12;
+  const period = hours24 >= 12 ? "PM" : "AM";
+
+  // State declarations
+  const [day, setDay] = useState(initialdate.getDate());
+  const [month, setMonth] = useState(initialdate.getMonth() + 1);
+  const [year, setYear] = useState(initialdate.getFullYear());
+  const [hour, setHour] = useState(format.timeFormat == 24 ? hours24 : hours12);
+  const [minutes, setMinutes] = useState(initialdate.getMinutes());
+  const [meridiem, setMeridiem] = useState<"AM" | "PM">(period);
+
+  // Calculate days in month - THIS IS THE FIX
+  const days_DATA = useMemo(() => {
+    const daysInMonth = new Date(year, month, 0).getDate();
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+  }, [year, month]); // Recalculate when year or month changes
+
+  const month_DATA = Array.from({ length: 12 }, (_, i) => i + 1);
+  const year_DATA = Array.from({ length: 20 }, (_, i) => 2020 + i);
+
+  // Time
+  const hour24_DATA = Array.from({ length: 24 }, (_, i) => i);
+  const hour12_DATA = Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i));
+  const minutes_DATA = Array.from({ length: 60 }, (_, i) => i);
+
+  const ITEM_HEIGHT = height || 44;
+  const VISIBLE_ITEMS = numRows || 3;
+  const CENTER_INDEX = Math.floor(VISIBLE_ITEMS / 2);
+
+  // Adjust day if it exceeds days in new month
+  useEffect(() => {
+    const maxDay = new Date(year, month, 0).getDate();
+    if (day > maxDay) {
+      setDay(maxDay);
+    }
+  }, [year, month]);
+
+  useEffect(() => {
+    let finalHour = hour;
+    if (format.timeFormat === 12) {
+      finalHour = to24Hour(hour, meridiem);
+    }
+
+    let selected = new Date(year, month - 1, day, finalHour, minutes, 0);
+
+    if (minDate && selected < minDate) selected = new Date(minDate);
+    if (maxDate && selected > maxDate) selected = new Date(maxDate);
+
+    // 🔒 Prevent infinite loop
+    if (
+      selected.getTime() !==
+      new Date(year, month - 1, day, finalHour, minutes, 0).getTime()
+    ) {
+      setDay(selected.getDate());
+      setMonth(selected.getMonth() + 1);
+      setYear(selected.getFullYear());
+      setHour(
+        format.timeFormat === 12
+          ? selected.getHours() % 12 || 12
+          : selected.getHours(),
+      );
+      setMinutes(selected.getMinutes());
+      setMeridiem(selected.getHours() >= 12 ? "PM" : "AM");
+    }
+
+    onChange?.(selected);
+  }, [day, month, year, hour, minutes, meridiem]);
+
+  const to24Hour = (hour12: number, meridiem: "AM" | "PM") => {
+    if (meridiem === "AM") {
+      return hour12 === 12 ? 0 : hour12;
+    }
+    return hour12 === 12 ? 12 : hour12 + 12;
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Selection window */}
+      <View
+        pointerEvents="none"
+        style={{
+          ...selectorContainerStyle,
+          position: "absolute",
+          top: ITEM_HEIGHT * CENTER_INDEX,
+          height: ITEM_HEIGHT,
+          left: 0,
+          right: 0,
+          backgroundColor: "#d9d9db8d",
+          borderRadius: 30,
+        }}
+      />
+
+      {format.day && (
+        <Wheel
+          type="day"
+          data={days_DATA}
+          onChange={setDay}
+          value={day}
+          height={height}
+          numRows={numRows}
+          centerItem={CENTER_INDEX}
+          textSizeActive={textSizeActive}
+          textSizeInActive={textSizeInActive}
+          textWeightActive={textWeightActive}
+          textWeightInActive={textWeightInActive}
+          fontFamily={fontFamily}
+          repeat={true}
+          format={format}
+          year={year}
+          month={month}
+          minDate={start}
+          maxDate={end}
+        />
+      )}
+
+      {format.month && (
+        <Wheel
+          type="month"
+          data={month_DATA}
+          onChange={setMonth}
+          value={month}
+          height={height}
+          numRows={numRows}
+          centerItem={CENTER_INDEX}
+          textSizeActive={textSizeActive}
+          textSizeInActive={textSizeInActive}
+          textWeightActive={textWeightActive}
+          textWeightInActive={textWeightInActive}
+          fontFamily={fontFamily}
+          repeat={true}
+          format={format}
+          year={year}
+          month={month}
+          minDate={start}
+          maxDate={end}
+        />
+      )}
+
+      {format.year && (
+        <Wheel
+          type="year"
+          data={year_DATA}
+          onChange={setYear}
+          value={year}
+          height={height}
+          numRows={numRows}
+          centerItem={CENTER_INDEX}
+          textSizeActive={textSizeActive}
+          textSizeInActive={textSizeInActive}
+          textWeightActive={textWeightActive}
+          textWeightInActive={textWeightInActive}
+          fontFamily={fontFamily}
+          repeat={true}
+          format={format}
+          year={year}
+          month={month}
+          minDate={start}
+          maxDate={end}
+        />
+      )}
+
+      {format.hours && (
+        <Wheel
+          type="hours"
+          data={format.timeFormat == 12 ? hour12_DATA : hour24_DATA}
+          onChange={setHour}
+          value={hour}
+          height={height}
+          numRows={numRows}
+          centerItem={CENTER_INDEX}
+          textSizeActive={textSizeActive}
+          textSizeInActive={textSizeInActive}
+          textWeightActive={textWeightActive}
+          textWeightInActive={textWeightInActive}
+          fontFamily={fontFamily}
+          repeat={true}
+          format={format}
+          year={year}
+          month={month}
+          minDate={start}
+          maxDate={end}
+        />
+      )}
+
+      {format.minutes && (
+        <Wheel
+          type="minutes"
+          data={minutes_DATA}
+          onChange={setMinutes}
+          value={minutes}
+          height={height}
+          numRows={numRows}
+          centerItem={CENTER_INDEX}
+          textSizeActive={textSizeActive}
+          textSizeInActive={textSizeInActive}
+          textWeightActive={textWeightActive}
+          textWeightInActive={textWeightInActive}
+          fontFamily={fontFamily}
+          repeat={true}
+          format={format}
+          year={year}
+          month={month}
+          minDate={start}
+          maxDate={end}
+        />
+      )}
+
+      {format.timeFormat == 12 && (
+        <Wheel<"AM" | "PM">
+          data={["AM", "PM"]}
+          onChange={setMeridiem}
+          value={meridiem}
+          height={height}
+          numRows={numRows}
+          centerItem={CENTER_INDEX}
+          textSizeActive={textSizeActive}
+          textSizeInActive={textSizeInActive}
+          textWeightActive={textWeightActive}
+          textWeightInActive={textWeightInActive}
+          fontFamily={fontFamily}
+          year={year}
+          month={month}
+          minDate={start}
+          maxDate={end}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    paddingHorizontal: 20,
+  },
+});