@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 +207 -0
- package/dist/Components/Wheel.d.ts +4 -0
- package/dist/Components/Wheel.d.ts.map +1 -0
- package/dist/Components/Wheel.js +104 -0
- package/dist/DataTimePicker.d.ts +3 -0
- package/dist/DataTimePicker.d.ts.map +1 -0
- package/dist/DataTimePicker.js +94 -0
- package/dist/Utils/month_name.d.ts +4 -0
- package/dist/Utils/month_name.d.ts.map +1 -0
- package/dist/Utils/month_name.js +23 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -0
- package/dist/types.d.ts +52 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +1 -0
- package/hitesh0009-react-native-datetime-picker-1.0.0.tgz +0 -0
- package/package.json +265 -0
- package/src/Components/Wheel.tsx +172 -0
- package/src/DataTimePicker.tsx +270 -0
- package/src/Utils/month_name.ts +25 -0
- package/src/index.ts +9 -0
- package/src/types.ts +59 -0
- package/tsconfig.json +26 -0
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 @@
|
|
|
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
|
+
];
|
package/dist/index.d.ts
ADDED
|
@@ -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";
|
package/dist/types.d.ts
ADDED
|
@@ -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 {};
|
|
Binary file
|