@hitesh0009/react-native-datetime-picker 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,207 @@
1
+ # React Native Wheel DateTime Picker
2
+
3
+ A fully customizable **wheel-based Date & Time Picker** for React Native.
4
+ Built from scratch with smooth scrolling, min/max date constraints, infinite wheels, and **full TypeScript support**.
5
+
6
+ Unlike modal-based pickers, this component is designed to be **embedded directly in your UI**, making it ideal for booking flows, forms, schedulers, and custom designs.
7
+
8
+ ---
9
+
10
+ ## ✨ Features
11
+
12
+ - 🌀 Smooth wheel-based scrolling (iOS-style)
13
+ - 📅 Date & time selection in one component
14
+ - ⏱ Supports **12h / 24h** formats
15
+ - 🔒 Min / Max date limits (auto-clamping)
16
+ - 🔁 Infinite scrolling wheels
17
+ - 🧠 Intelligent day handling (Feb, leap years, etc.)
18
+ - 🎨 Highly customizable styles
19
+ - 🧩 Fully typed with TypeScript
20
+ - ⚡ No native modules, no dependencies
21
+
22
+ ---
23
+
24
+ ## 📦 Installation
25
+
26
+ ```sh
27
+ npm install react-native-wheel-datetime-picker
28
+ ````
29
+
30
+ or
31
+
32
+ ```sh
33
+ yarn add react-native-wheel-datetime-picker
34
+ ```
35
+
36
+ ---
37
+
38
+ ## 🚀 Basic Usage
39
+
40
+ ```tsx
41
+ import { DateTimePicker } from "react-native-wheel-datetime-picker";
42
+
43
+ export default function App() {
44
+ return (
45
+ <DateTimePicker
46
+ initial={new Date()}
47
+ onChange={(date) => {
48
+ console.log("Selected:", date);
49
+ }}
50
+ />
51
+ );
52
+ }
53
+ ```
54
+
55
+ ---
56
+
57
+ ## 🧠 How It Works
58
+
59
+ * Each unit (day, month, year, hours, minutes) is a **wheel**
60
+ * Wheels snap to rows for precise selection
61
+ * When a value goes outside `start` / `end`, it is **clamped**
62
+ * Wheels automatically **roll back** to the nearest valid value
63
+ * Day count updates automatically when month/year changes
64
+
65
+ ---
66
+
67
+ ## 🧩 Props
68
+
69
+ ### `DateTimePickerProps`
70
+
71
+ | Prop | Type | Required | Description |
72
+ | ------------------------ | ------------------------- | -------- | ------------------------------------- |
73
+ | `initial` | `Date` | ✅ | Initial selected date |
74
+ | `start` | `Date` | ❌ | Minimum selectable date |
75
+ | `end` | `Date` | ❌ | Maximum selectable date |
76
+ | `onChange` | `(date: Date) => void` | ❌ | Called on every valid change |
77
+ | `format` | `DateTimeFormat` | ❌ | Controls display & time format |
78
+ | `height` | `number` | ❌ | Height of a single row (default `44`) |
79
+ | `numRows` | `number` | ❌ | Visible rows (default `5`) |
80
+ | `fontFamily` | `string` | ❌ | Font family for text |
81
+ | `textSizeActive` | `number` | ❌ | Font size for selected item |
82
+ | `textSizeInActive` | `number` | ❌ | Font size for inactive items |
83
+ | `textWeightActive` | `TextStyle["fontWeight"]` | ❌ | Font weight for selected item |
84
+ | `textWeightInActive` | `TextStyle["fontWeight"]` | ❌ | Font weight for inactive items |
85
+ | `selectorContainerStyle` | `ViewStyle` | ❌ | Style for the selection highlight |
86
+
87
+ ---
88
+
89
+ ## 🎛 Format Options
90
+
91
+ ### `DateTimeFormat`
92
+
93
+ ```ts
94
+ type DateTimeFormat = {
95
+ day?: "numeric" | "alphabetical";
96
+ month?: "numeric" | "alphabeticalShort" | "alphabeticalLong";
97
+ year?: "short" | "long";
98
+ timeFormat?: 12 | 24;
99
+ hours?: "hh" | "h";
100
+ minutes?: "mm" | "m";
101
+ };
102
+ ```
103
+
104
+ ### Example
105
+
106
+ ```tsx
107
+ <DateTimePicker
108
+ initial={new Date()}
109
+ format={{
110
+ day: "alphabetical",
111
+ month: "alphabeticalShort",
112
+ year: "long",
113
+ timeFormat: 12,
114
+ hours: "hh",
115
+ minutes: "mm",
116
+ }}
117
+ />
118
+ ```
119
+
120
+ ---
121
+
122
+ ## ⏱ Min / Max Date Example
123
+
124
+ ```tsx
125
+ <DateTimePicker
126
+ initial={new Date()}
127
+ start={new Date(2024, 0, 1)}
128
+ end={new Date(2026, 11, 31, 23, 59)}
129
+ onChange={(date) => console.log(date)}
130
+ />
131
+ ```
132
+
133
+ ✔ If the user scrolls outside limits, the picker **automatically snaps back**.
134
+
135
+ ---
136
+
137
+ ## 🧪 TypeScript Support
138
+
139
+ All props are fully typed and exported.
140
+
141
+ ```ts
142
+ import type {
143
+ DateTimePickerProps,
144
+ DateTimeFormat,
145
+ WheelProps,
146
+ } from "react-native-wheel-datetime-picker";
147
+ ```
148
+
149
+ You get:
150
+
151
+ * IntelliSense
152
+ * Auto-complete
153
+ * Compile-time safety
154
+
155
+ ---
156
+
157
+ ## 🧱 Architecture Overview
158
+
159
+ * `DateTimePicker`
160
+ Manages state, date logic, validation, and clamping
161
+
162
+ * `Wheel`
163
+ Generic wheel component using `FlatList` + snapping
164
+
165
+ * `types.ts`
166
+ Public API types for consumers
167
+
168
+ No context, no Redux, no magic — just clean React.
169
+
170
+ ---
171
+
172
+ ## ⚠️ Notes
173
+
174
+ * This is a **controlled internal picker**, not modal-based
175
+ * Designed for **embedded UI**, not dialogs
176
+ * Works on both **Android & iOS**
177
+ * No native code required
178
+
179
+ ---
180
+
181
+ ## 📄 License
182
+
183
+ MIT License © 2026
184
+
185
+ ---
186
+
187
+ ## 🙌 Contributing
188
+
189
+ PRs and issues are welcome.
190
+ If you find a bug or want a feature, open an issue.
191
+
192
+ ---
193
+
194
+ ## ⭐ Why This Exists
195
+
196
+ Most date pickers are:
197
+
198
+ * modal-only
199
+ * hard to style
200
+ * poorly typed
201
+ * over-engineered
202
+
203
+ This library is built for **control, clarity, and composability**.
204
+
205
+ ---
206
+
207
+ Happy building 🚀
@@ -0,0 +1,4 @@
1
+ import { WheelProps } from "../types";
2
+ declare const Wheel: <T extends number | string>({ data, onChange, value, type, height, numRows, centerItem, textSizeActive, textSizeInActive, textWeightActive, textWeightInActive, fontFamily, repeat, format, year, month, }: WheelProps<T>) => import("react/jsx-runtime").JSX.Element;
3
+ export default Wheel;
4
+ //# sourceMappingURL=Wheel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/Components/Wheel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,QAAA,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,gLAiBvC,UAAU,CAAC,CAAC,CAAC,4CAmJf,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -0,0 +1,104 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { FlatList, Text, View } from "react-native";
3
+ import { useState, useEffect, useRef } from "react";
4
+ import { Month_name, Week_name } from "../Utils/month_name";
5
+ const Wheel = ({ data, onChange, value, type, height, numRows, centerItem, textSizeActive, textSizeInActive, textWeightActive, textWeightInActive, fontFamily, repeat, format, year, month, }) => {
6
+ const listref = useRef(null);
7
+ const [Data, setData] = useState(data);
8
+ useEffect(() => {
9
+ setData(data);
10
+ }, [data]);
11
+ useEffect(() => {
12
+ if (!listref.current)
13
+ return;
14
+ const index = data.indexOf(value);
15
+ if (index >= 0) {
16
+ listref.current.scrollToIndex({
17
+ index,
18
+ animated: true,
19
+ });
20
+ }
21
+ }, [value]);
22
+ const selectedIndex = Data.indexOf(value);
23
+ const loadMore = () => {
24
+ setData((prev) => [...prev, ...data]);
25
+ };
26
+ const renderItem = (item) => {
27
+ if (type === "day") {
28
+ if ((format === null || format === void 0 ? void 0 : format.day) === "alphabetical") {
29
+ const selectedYear = year || new Date().getFullYear();
30
+ const selectedMonth = month ? month - 1 : new Date().getMonth();
31
+ const dayvalue = item;
32
+ const dateObj = new Date(selectedYear, selectedMonth, dayvalue);
33
+ const dayIndex = dateObj.getDay();
34
+ const dayName = Week_name[dayIndex].shortName;
35
+ return `${dayName} ${item}`;
36
+ }
37
+ return item;
38
+ }
39
+ if (type === "month") {
40
+ const monthValue = item;
41
+ if ((format === null || format === void 0 ? void 0 : format.month) === "alphabeticalShort") {
42
+ const name = Month_name.find((e) => e.id === monthValue);
43
+ return (name === null || name === void 0 ? void 0 : name.shortName) || item;
44
+ }
45
+ if ((format === null || format === void 0 ? void 0 : format.month) === "alphabeticalLong") {
46
+ const name = Month_name.find((e) => e.id == item);
47
+ return (name === null || name === void 0 ? void 0 : name.fullName) || item;
48
+ }
49
+ return item;
50
+ }
51
+ if (type === "year") {
52
+ if ((format === null || format === void 0 ? void 0 : format.year) === "short") {
53
+ return String(item).slice(-2);
54
+ }
55
+ return item;
56
+ }
57
+ if (type === "hours") {
58
+ if ((format === null || format === void 0 ? void 0 : format.hours) === "hh") {
59
+ const result = String(item).padStart(2, "0");
60
+ return `${result} hrs`;
61
+ }
62
+ return `${item} hrs`;
63
+ }
64
+ if (type === "minutes") {
65
+ if ((format === null || format === void 0 ? void 0 : format.minutes) === "mm") {
66
+ const result = String(item).padStart(2, "0");
67
+ return `${result} min`;
68
+ }
69
+ return `${item} min`;
70
+ }
71
+ return item;
72
+ };
73
+ return (_jsx(View, { style: {
74
+ height: height * numRows,
75
+ width: data.length <= 2 ? 60 : undefined,
76
+ flex: data.length > 2 ? 1 : 0,
77
+ }, children: _jsx(FlatList, { ref: listref, 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: {
78
+ paddingVertical: height * centerItem,
79
+ }, getItemLayout: (_, index) => ({
80
+ length: height,
81
+ offset: height * index,
82
+ index,
83
+ }), onMomentumScrollEnd: (e) => {
84
+ const index = Math.round(e.nativeEvent.contentOffset.y / height);
85
+ const nextValue = Data[index % data.length];
86
+ // if (isItemDisabled(nextValue)) return;
87
+ onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
88
+ }, renderItem: ({ item }) => (_jsx(View, { style: {
89
+ height: height,
90
+ justifyContent: "center",
91
+ alignItems: "center",
92
+ }, children: _jsx(Text, { style: {
93
+ // opacity: isItemDisabled(item) ? 0.25 : item === value ? 1 : 0.4,
94
+ fontFamily,
95
+ fontSize: item === value
96
+ ? (textSizeActive !== null && textSizeActive !== void 0 ? textSizeActive : 18)
97
+ : (textSizeInActive !== null && textSizeInActive !== void 0 ? textSizeInActive : 14),
98
+ opacity: item === value ? 1 : 0.31,
99
+ fontWeight: item === value
100
+ ? (textWeightActive !== null && textWeightActive !== void 0 ? textWeightActive : "600")
101
+ : (textWeightInActive !== null && textWeightInActive !== void 0 ? textWeightInActive : "400"),
102
+ }, children: renderItem(item) }) })) }, Data.length) }));
103
+ };
104
+ export default Wheel;
@@ -0,0 +1,3 @@
1
+ import { DateTimePickerProps } from "./types";
2
+ export declare const DateTimePicker: ({ start, end, initial, selectorContainerStyle, textSizeActive, textSizeInActive, textWeightActive, textWeightInActive, fontFamily, height, numRows, onChange, format, }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=DataTimePicker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTimePicker.d.ts","sourceRoot":"","sources":["../src/DataTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,cAAc,GAAI,yKAqB5B,mBAAmB,4CA2OrB,CAAC"}
@@ -0,0 +1,94 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { StyleSheet, View } from "react-native";
3
+ import { useEffect, useState, useMemo } from "react";
4
+ import Wheel from "./Components/Wheel";
5
+ export const DateTimePicker = ({ start, end, initial, selectorContainerStyle, textSizeActive = 15, textSizeInActive, textWeightActive, textWeightInActive, fontFamily, height = 44, numRows = 5, onChange, format = {
6
+ day: "alphabetical",
7
+ month: "alphabeticalShort",
8
+ year: "short",
9
+ timeFormat: 24,
10
+ hours: "hh",
11
+ minutes: "mm",
12
+ }, }) => {
13
+ const initialdate = initial instanceof Date ? initial : new Date(initial !== null && initial !== void 0 ? initial : Date.now());
14
+ const minDate = start instanceof Date ? start : null;
15
+ const maxDate = end instanceof Date ? end : null;
16
+ const hours24 = initialdate.getHours();
17
+ const hours12 = hours24 % 12 || 12;
18
+ const period = hours24 >= 12 ? "PM" : "AM";
19
+ // State declarations
20
+ const [day, setDay] = useState(initialdate.getDate());
21
+ const [month, setMonth] = useState(initialdate.getMonth() + 1);
22
+ const [year, setYear] = useState(initialdate.getFullYear());
23
+ const [hour, setHour] = useState(format.timeFormat == 24 ? hours24 : hours12);
24
+ const [minutes, setMinutes] = useState(initialdate.getMinutes());
25
+ const [meridiem, setMeridiem] = useState(period);
26
+ // Calculate days in month - THIS IS THE FIX
27
+ const days_DATA = useMemo(() => {
28
+ const daysInMonth = new Date(year, month, 0).getDate();
29
+ return Array.from({ length: daysInMonth }, (_, i) => i + 1);
30
+ }, [year, month]); // Recalculate when year or month changes
31
+ const month_DATA = Array.from({ length: 12 }, (_, i) => i + 1);
32
+ const year_DATA = Array.from({ length: 20 }, (_, i) => 2020 + i);
33
+ // Time
34
+ const hour24_DATA = Array.from({ length: 24 }, (_, i) => i);
35
+ const hour12_DATA = Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i));
36
+ const minutes_DATA = Array.from({ length: 60 }, (_, i) => i);
37
+ const ITEM_HEIGHT = height || 44;
38
+ const VISIBLE_ITEMS = numRows || 3;
39
+ const CENTER_INDEX = Math.floor(VISIBLE_ITEMS / 2);
40
+ // Adjust day if it exceeds days in new month
41
+ useEffect(() => {
42
+ const maxDay = new Date(year, month, 0).getDate();
43
+ if (day > maxDay) {
44
+ setDay(maxDay);
45
+ }
46
+ }, [year, month]);
47
+ useEffect(() => {
48
+ let finalHour = hour;
49
+ if (format.timeFormat === 12) {
50
+ finalHour = to24Hour(hour, meridiem);
51
+ }
52
+ let selected = new Date(year, month - 1, day, finalHour, minutes, 0);
53
+ if (minDate && selected < minDate)
54
+ selected = new Date(minDate);
55
+ if (maxDate && selected > maxDate)
56
+ selected = new Date(maxDate);
57
+ // 🔒 Prevent infinite loop
58
+ if (selected.getTime() !==
59
+ new Date(year, month - 1, day, finalHour, minutes, 0).getTime()) {
60
+ setDay(selected.getDate());
61
+ setMonth(selected.getMonth() + 1);
62
+ setYear(selected.getFullYear());
63
+ setHour(format.timeFormat === 12
64
+ ? selected.getHours() % 12 || 12
65
+ : selected.getHours());
66
+ setMinutes(selected.getMinutes());
67
+ setMeridiem(selected.getHours() >= 12 ? "PM" : "AM");
68
+ }
69
+ onChange === null || onChange === void 0 ? void 0 : onChange(selected);
70
+ }, [day, month, year, hour, minutes, meridiem]);
71
+ const to24Hour = (hour12, meridiem) => {
72
+ if (meridiem === "AM") {
73
+ return hour12 === 12 ? 0 : hour12;
74
+ }
75
+ return hour12 === 12 ? 12 : hour12 + 12;
76
+ };
77
+ return (_jsxs(View, { style: styles.container, children: [_jsx(View, { pointerEvents: "none", style: {
78
+ ...selectorContainerStyle,
79
+ position: "absolute",
80
+ top: ITEM_HEIGHT * CENTER_INDEX,
81
+ height: ITEM_HEIGHT,
82
+ left: 0,
83
+ right: 0,
84
+ backgroundColor: "#d9d9db8d",
85
+ borderRadius: 30,
86
+ } }), format.day && (_jsx(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 && (_jsx(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 && (_jsx(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 && (_jsx(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 && (_jsx(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 && (_jsx(Wheel, { 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 }))] }));
87
+ };
88
+ const styles = StyleSheet.create({
89
+ container: {
90
+ flexDirection: "row",
91
+ justifyContent: "center",
92
+ paddingHorizontal: 20,
93
+ },
94
+ });
@@ -0,0 +1,4 @@
1
+ import { Items } from "../types";
2
+ export declare const Month_name: Items[];
3
+ export declare const Week_name: Items[];
4
+ //# sourceMappingURL=month_name.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"month_name.d.ts","sourceRoot":"","sources":["../../src/Utils/month_name.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAAK,EAa7B,CAAC;AACF,eAAO,MAAM,SAAS,EAAE,KAAK,EAQ5B,CAAC"}
@@ -0,0 +1,23 @@
1
+ export const Month_name = [
2
+ { key: 0, id: 1, fullName: "January", shortName: "Jan" },
3
+ { key: 1, id: 2, fullName: "February", shortName: "Feb" },
4
+ { key: 2, id: 3, fullName: "March", shortName: "Mar" },
5
+ { key: 3, id: 4, fullName: "April", shortName: "Apr" },
6
+ { key: 4, id: 5, fullName: "May", shortName: "May" },
7
+ { key: 5, id: 6, fullName: "June", shortName: "Jun" },
8
+ { key: 6, id: 7, fullName: "July", shortName: "Jul" },
9
+ { key: 7, id: 8, fullName: "August", shortName: "Aug" },
10
+ { key: 8, id: 9, fullName: "September", shortName: "Sep" },
11
+ { key: 9, id: 10, fullName: "October", shortName: "Oct" },
12
+ { key: 10, id: 11, fullName: "November", shortName: "Nov" },
13
+ { key: 11, id: 12, fullName: "December", shortName: "Dec" },
14
+ ];
15
+ export const Week_name = [
16
+ { key: 0, id: 1, fullName: "Sunday", shortName: "Sun" },
17
+ { key: 2, id: 2, fullName: "Monday", shortName: "Mon" },
18
+ { key: 3, id: 3, fullName: "Tuesday", shortName: "Tue" },
19
+ { key: 4, id: 4, fullName: "Wednesday", shortName: "Wed" },
20
+ { key: 5, id: 5, fullName: "Thursday", shortName: "Thu" },
21
+ { key: 6, id: 6, fullName: "Friday", shortName: "Fri" },
22
+ { key: 7, id: 7, fullName: "Saturday", shortName: "Sat" },
23
+ ];
@@ -0,0 +1,3 @@
1
+ export { DateTimePicker } from "./DataTimePicker";
2
+ export { DateTimePickerProps, DateTimeFormat, Items, WheelProps, WheelTypes, } from "./types";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,KAAK,EACL,UAAU,EACV,UAAU,GACX,MAAM,SAAS,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export { DateTimePicker } from "./DataTimePicker";
@@ -0,0 +1,52 @@
1
+ import { TextStyle, ViewStyle } from "react-native";
2
+ export type Items = {
3
+ key: number;
4
+ id: number;
5
+ shortName: string;
6
+ fullName: string;
7
+ };
8
+ export type DateTimeFormat = {
9
+ day?: "numeric" | "alphabetical";
10
+ month?: "numeric" | "alphabeticalShort" | "alphabeticalLong";
11
+ year?: "short" | "long";
12
+ timeFormat?: 24 | 12;
13
+ hours?: "hh" | "h";
14
+ minutes?: "mm" | "m";
15
+ };
16
+ export interface DateTimePickerProps {
17
+ start?: Date;
18
+ end?: Date;
19
+ initial: Date;
20
+ selectorContainerStyle?: ViewStyle;
21
+ textSizeActive?: TextStyle["fontSize"];
22
+ textSizeInActive?: TextStyle["fontSize"];
23
+ textWeightActive?: TextStyle["fontWeight"];
24
+ textWeightInActive?: TextStyle["fontWeight"];
25
+ fontFamily?: string;
26
+ height?: number;
27
+ numRows?: number;
28
+ onChange?: (date: Date) => void;
29
+ format?: DateTimeFormat;
30
+ }
31
+ export type WheelTypes = "day" | "month" | "year" | "hours" | "minutes";
32
+ export interface WheelProps<T = number | string> {
33
+ data: T[];
34
+ onChange: (value: T) => void;
35
+ value: T;
36
+ height: number;
37
+ numRows: number;
38
+ centerItem: number;
39
+ type?: WheelTypes;
40
+ textSizeActive?: number;
41
+ textSizeInActive?: number;
42
+ textWeightActive?: TextStyle["fontWeight"];
43
+ textWeightInActive?: TextStyle["fontWeight"];
44
+ fontFamily?: TextStyle["fontFamily"];
45
+ repeat?: boolean;
46
+ format?: DateTimeFormat;
47
+ year?: number;
48
+ month?: number;
49
+ minDate?: Date;
50
+ maxDate?: Date;
51
+ }
52
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;IAC7D,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IAEd,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACvC,gBAAgB,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACzC,gBAAgB,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC3C,kBAAkB,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM;IAC7C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC3C,kBAAkB,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB"}
package/dist/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};