@purjayadi/react-native-datepicker 1.0.0 → 1.0.2

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 CHANGED
@@ -13,6 +13,15 @@ A flexible and customizable React Native datepicker component with bottom sheet
13
13
  - 🎯 Min/Max date range support
14
14
  - ♿ Safe area support
15
15
 
16
+ ## Screenshots
17
+
18
+ <div align="center">
19
+ <img src="https://github.com/purjayadi/react-native-datepicker/blob/main/screenshot/1.png" width="250" alt="Screenshot 1" />
20
+ <img src="https://github.com/purjayadi/react-native-datepicker/blob/main/screenshot/2.png" width="250" alt="Screenshot 2" />
21
+ <img src="https://github.com/purjayadi/react-native-datepicker/blob/main/screenshot/3.png" width="250" alt="Screenshot 3" />
22
+ <img src="https://github.com/purjayadi/react-native-datepicker/blob/main/screenshot/4.png" width="250" alt="Screenshot 4" />
23
+ </div>
24
+
16
25
  ## Installation
17
26
 
18
27
  ```bash
@@ -140,31 +149,71 @@ export default function App() {
140
149
  />
141
150
  ```
142
151
 
152
+ ### With Custom Date Format
153
+
154
+ ```tsx
155
+ // ISO format: "2026-02-06"
156
+ <DatePicker
157
+ ref={datePickerRef}
158
+ label="Select Date"
159
+ value={selectedDate}
160
+ onChange={setSelectedDate}
161
+ dateFormat="yyyy-MM-dd"
162
+ />
163
+
164
+ // US format: "02/06/2026"
165
+ <DatePicker
166
+ ref={datePickerRef}
167
+ label="Select Date"
168
+ value={selectedDate}
169
+ onChange={setSelectedDate}
170
+ dateFormat="MM/dd/yyyy"
171
+ />
172
+
173
+ // Custom format with time: "Feb 06, 2026 3:30 PM"
174
+ <DatePicker
175
+ ref={datePickerRef}
176
+ label="Select Date & Time"
177
+ value={selectedDateTime}
178
+ onChange={setSelectedDateTime}
179
+ showTimePicker
180
+ dateFormat="MMM dd, yyyy h:mm a"
181
+ />
182
+ ```
183
+
184
+ > **Note:** Date format uses [date-fns format tokens](https://date-fns.org/v3.3.1/docs/format). Common formats:
185
+ >
186
+ > - `yyyy-MM-dd` → 2026-02-06
187
+ > - `dd/MM/yyyy` → 06/02/2026
188
+ > - `MMM dd, yyyy` → Feb 06, 2026
189
+ > - `MMMM dd, yyyy HH:mm` → February 06, 2026 15:30
190
+
143
191
  ## API Reference
144
192
 
145
193
  ### Props
146
194
 
147
- | Prop | Type | Default | Description |
148
- | ----------------------- | --------------------------- | --------------- | ----------------------------------------- |
149
- | `value` | `string` | `undefined` | Current selected date string |
150
- | `label` | `string` | `undefined` | Label text above the input |
151
- | `placeholder` | `string` | `"Select Date"` | Placeholder text when no date is selected |
152
- | `onChange` | `(date: string) => void` | **required** | Callback when date is selected |
153
- | `minDate` | `string` | `undefined` | Minimum selectable date (ISO format) |
154
- | `maxDate` | `string` | `undefined` | Maximum selectable date (ISO format) |
155
- | `showTimePicker` | `boolean` | `false` | Show time picker in addition to date |
156
- | `subText` | `string \| React.ReactNode` | `undefined` | Subtitle text below label |
157
- | `errors` | `string[]` | `undefined` | Array of error messages |
158
- | `inputStyle` | `ViewStyle` | `undefined` | Custom style for input container |
159
- | `inputTextStyle` | `TextStyle` | `undefined` | Custom style for input text |
160
- | `labelStyle` | `TextStyle` | `undefined` | Custom style for label |
161
- | `errorStyle` | `TextStyle` | `undefined` | Custom style for error text |
162
- | `subTextStyle` | `TextStyle` | `undefined` | Custom style for subtitle text |
163
- | `highlightColor` | `string` | `"#E5E5E5"` | Color of the picker highlight |
164
- | `buttonStyle` | `ViewStyle` | `undefined` | Custom style for save button |
165
- | `buttonTextStyle` | `TextStyle` | `undefined` | Custom style for save button text |
166
- | `cancelButtonStyle` | `ViewStyle` | `undefined` | Custom style for cancel button |
167
- | `cancelButtonTextStyle` | `TextStyle` | `undefined` | Custom style for cancel button text |
195
+ | Prop | Type | Default | Description |
196
+ | ----------------------- | --------------------------- | ----------------------------------------- | ----------------------------------------- |
197
+ | `value` | `string` | `undefined` | Current selected date string |
198
+ | `label` | `string` | `undefined` | Label text above the input |
199
+ | `placeholder` | `string` | `"Select Date"` | Placeholder text when no date is selected |
200
+ | `onChange` | `(date: string) => void` | **required** | Callback when date is selected |
201
+ | `minDate` | `string` | `undefined` | Minimum selectable date (ISO format) |
202
+ | `maxDate` | `string` | `undefined` | Maximum selectable date (ISO format) |
203
+ | `showTimePicker` | `boolean` | `false` | Show time picker in addition to date |
204
+ | `dateFormat` | `string` | `"dd MMMM yyyy"` or `"dd MMM yyyy HH:mm"` | Custom date format (uses date-fns format) |
205
+ | `subText` | `string \| React.ReactNode` | `undefined` | Subtitle text below label |
206
+ | `errors` | `string[]` | `undefined` | Array of error messages |
207
+ | `inputStyle` | `ViewStyle` | `undefined` | Custom style for input container |
208
+ | `inputTextStyle` | `TextStyle` | `undefined` | Custom style for input text |
209
+ | `labelStyle` | `TextStyle` | `undefined` | Custom style for label |
210
+ | `errorStyle` | `TextStyle` | `undefined` | Custom style for error text |
211
+ | `subTextStyle` | `TextStyle` | `undefined` | Custom style for subtitle text |
212
+ | `highlightColor` | `string` | `"#E5E5E5"` | Color of the picker highlight |
213
+ | `buttonStyle` | `ViewStyle` | `undefined` | Custom style for save button |
214
+ | `buttonTextStyle` | `TextStyle` | `undefined` | Custom style for save button text |
215
+ | `cancelButtonStyle` | `ViewStyle` | `undefined` | Custom style for cancel button |
216
+ | `cancelButtonTextStyle` | `TextStyle` | `undefined` | Custom style for cancel button text |
168
217
 
169
218
  ### Ref Methods
170
219
 
package/dist/index.d.mts CHANGED
@@ -12,6 +12,7 @@ interface DatePickerProps {
12
12
  minDate?: string;
13
13
  maxDate?: string;
14
14
  showTimePicker?: boolean;
15
+ dateFormat?: string;
15
16
  subText?: string | React.ReactNode;
16
17
  errors?: string[];
17
18
  inputStyle?: ViewStyle;
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ interface DatePickerProps {
12
12
  minDate?: string;
13
13
  maxDate?: string;
14
14
  showTimePicker?: boolean;
15
+ dateFormat?: string;
15
16
  subText?: string | React.ReactNode;
16
17
  errors?: string[];
17
18
  inputStyle?: ViewStyle;
package/dist/index.js CHANGED
@@ -40,7 +40,6 @@ var import_react_native = require("react-native");
40
40
  var import_date_fns = require("date-fns");
41
41
  var import_react_native_wheel_scrollview_picker = __toESM(require("react-native-wheel-scrollview-picker"));
42
42
  var import_bottom_sheet = require("@gorhom/bottom-sheet");
43
- var import_react_native_safe_area_context = require("react-native-safe-area-context");
44
43
  var InternalButton = ({ onPress, children, outline, style, textStyle }) => {
45
44
  return /* @__PURE__ */ import_react.default.createElement(
46
45
  import_react_native.TouchableOpacity,
@@ -70,6 +69,7 @@ var DatePicker = (0, import_react.forwardRef)(
70
69
  minDate,
71
70
  maxDate,
72
71
  showTimePicker = false,
72
+ dateFormat,
73
73
  subText,
74
74
  errors,
75
75
  inputStyle,
@@ -85,7 +85,10 @@ var DatePicker = (0, import_react.forwardRef)(
85
85
  }, ref) => {
86
86
  const nowYear = (/* @__PURE__ */ new Date()).getFullYear();
87
87
  const bottomSheetRef = (0, import_react.useRef)(null);
88
- const { bottom: paddingBottom } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
88
+ const defaultFormat = (0, import_react.useMemo)(() => {
89
+ if (dateFormat) return dateFormat;
90
+ return showTimePicker ? "dd MMM yyyy HH:mm" : "dd MMMM yyyy";
91
+ }, [dateFormat, showTimePicker]);
89
92
  const fullMonths = (0, import_react.useMemo)(
90
93
  () => [
91
94
  "January",
@@ -132,7 +135,19 @@ var DatePicker = (0, import_react.forwardRef)(
132
135
  const displayMonths = showTimePicker ? shortMonths : fullMonths;
133
136
  const show = (0, import_react.useCallback)(
134
137
  (initialDate) => {
135
- const selectedDate = initialDate ? (0, import_date_fns.parse)(initialDate, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : /* @__PURE__ */ new Date();
138
+ let selectedDate;
139
+ if (initialDate) {
140
+ try {
141
+ selectedDate = (0, import_date_fns.parse)(initialDate, defaultFormat, /* @__PURE__ */ new Date());
142
+ if (!selectedDate || isNaN(selectedDate.getTime())) {
143
+ selectedDate = /* @__PURE__ */ new Date();
144
+ }
145
+ } catch {
146
+ selectedDate = /* @__PURE__ */ new Date();
147
+ }
148
+ } else {
149
+ selectedDate = /* @__PURE__ */ new Date();
150
+ }
136
151
  const selectedDay = (0, import_date_fns.format)(selectedDate, "dd");
137
152
  const currentMonthIndex = selectedDate.getMonth();
138
153
  const selectedMonth = fullMonths[currentMonthIndex];
@@ -160,7 +175,7 @@ var DatePicker = (0, import_react.forwardRef)(
160
175
  setInitComplete(true);
161
176
  setTimeout(() => bottomSheetRef.current?.present(), 10);
162
177
  },
163
- [minDate, maxDate, fullMonths]
178
+ [minDate, maxDate, fullMonths, showTimePicker, defaultFormat]
164
179
  );
165
180
  (0, import_react.useImperativeHandle)(ref, () => ({ show }), [show]);
166
181
  const handleSetDate = () => {
@@ -176,8 +191,7 @@ var DatePicker = (0, import_react.forwardRef)(
176
191
  if (minDateTime && (0, import_date_fns.isBefore)((0, import_date_fns.startOfDay)(finalDate), minDateTime) || maxDateTime && (0, import_date_fns.isAfter)((0, import_date_fns.startOfDay)(finalDate), maxDateTime)) {
177
192
  return;
178
193
  }
179
- const selectedMonthIndex = fullMonths.findIndex((m) => m === month);
180
- const formattedDate = showTimePicker ? `${day} ${shortMonths[selectedMonthIndex]} ${year} ${hour}:${minute}` : `${day} ${fullMonths[selectedMonthIndex]} ${year}`;
194
+ const formattedDate = (0, import_date_fns.format)(finalDate, defaultFormat);
181
195
  onChange(formattedDate);
182
196
  bottomSheetRef.current?.close();
183
197
  };
@@ -358,7 +372,7 @@ var DatePicker = (0, import_react.forwardRef)(
358
372
  style: [
359
373
  styles.buttonContainer,
360
374
  {
361
- paddingBottom: import_react_native.Platform.OS === "ios" ? paddingBottom : 20
375
+ paddingBottom: import_react_native.Platform.OS === "ios" ? 20 : 20
362
376
  }
363
377
  ]
364
378
  },
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.tsx","../src/DatePicker.tsx"],"sourcesContent":["export { default as DatePicker } from \"./DatePicker\";\nexport type { DatePickerRef, DatePickerProps } from \"./DatePicker\";\n","import React, {\n useState,\n useImperativeHandle,\n forwardRef,\n useCallback,\n useRef,\n useMemo,\n} from \"react\";\nimport {\n View,\n TouchableOpacity,\n Platform,\n LayoutChangeEvent,\n Text,\n StyleSheet,\n ViewStyle,\n TextStyle,\n} from \"react-native\";\nimport {\n format,\n parse,\n getDaysInMonth,\n subYears,\n isBefore,\n isAfter,\n getYear,\n startOfDay,\n} from \"date-fns\";\nimport ScrollPicker from \"react-native-wheel-scrollview-picker\";\nimport { BottomSheetModal, BottomSheetBackdrop } from \"@gorhom/bottom-sheet\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nexport interface DatePickerRef {\n show: (initialDate?: string) => void;\n}\n\nexport interface DatePickerProps {\n value?: string;\n label?: string;\n placeholder?: string;\n onChange: (date: string) => void;\n minDate?: string;\n maxDate?: string;\n showTimePicker?: boolean;\n subText?: string | React.ReactNode;\n errors?: string[];\n // Styling props\n inputStyle?: ViewStyle;\n inputTextStyle?: TextStyle;\n labelStyle?: TextStyle;\n errorStyle?: TextStyle;\n subTextStyle?: TextStyle;\n highlightColor?: string;\n buttonStyle?: ViewStyle;\n buttonTextStyle?: TextStyle;\n cancelButtonStyle?: ViewStyle;\n cancelButtonTextStyle?: TextStyle;\n}\n\nconst InternalButton: React.FC<{\n onPress: () => void;\n children: string;\n outline?: boolean;\n style?: ViewStyle;\n textStyle?: TextStyle;\n}> = ({ onPress, children, outline, style, textStyle }) => {\n return (\n <TouchableOpacity\n onPress={onPress}\n style={[styles.button, outline && styles.buttonOutline, style]}\n >\n <Text\n style={[\n styles.buttonText,\n outline && styles.buttonTextOutline,\n textStyle,\n ]}\n >\n {children}\n </Text>\n </TouchableOpacity>\n );\n};\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (\n {\n value,\n label,\n placeholder,\n onChange,\n minDate,\n maxDate,\n showTimePicker = false,\n subText,\n errors,\n inputStyle,\n inputTextStyle,\n labelStyle,\n errorStyle,\n subTextStyle,\n highlightColor = \"#E5E5E5\",\n buttonStyle,\n buttonTextStyle,\n cancelButtonStyle,\n cancelButtonTextStyle,\n },\n ref\n ) => {\n const nowYear = new Date().getFullYear();\n const bottomSheetRef = useRef<BottomSheetModal>(null);\n const { bottom: paddingBottom } = useSafeAreaInsets();\n\n const fullMonths = useMemo(\n () => [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n []\n );\n\n const shortMonths = useMemo(\n () => [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ],\n []\n );\n const [day, setDay] = useState(\"01\");\n const [month, setMonth] = useState(\"January\");\n const [year, setYear] = useState(nowYear);\n const [days, setDays] = useState<string[]>([]);\n const [years, setYears] = useState<number[]>([]);\n const [initComplete, setInitComplete] = useState(false);\n const [hour, setHour] = useState(\"00\");\n const [minute, setMinute] = useState(\"00\");\n const [height, setHeight] = useState(180);\n\n const displayMonths = showTimePicker ? shortMonths : fullMonths;\n\n const show = useCallback(\n (initialDate?: string) => {\n const selectedDate = initialDate\n ? parse(initialDate, \"yyyy-MM-dd\", new Date())\n : new Date();\n const selectedDay = format(selectedDate, \"dd\");\n const currentMonthIndex = selectedDate.getMonth();\n const selectedMonth = fullMonths[currentMonthIndex];\n const selectedYear = getYear(selectedDate);\n\n const min = minDate\n ? parse(minDate, \"yyyy-MM-dd\", new Date())\n : subYears(new Date(), 200);\n const max = maxDate\n ? parse(maxDate, \"yyyy-MM-dd\", new Date())\n : new Date();\n\n const allYears = Array.from(\n { length: 200 },\n (_, i) => nowYear - i\n ).filter((y) => y >= getYear(min) && y <= getYear(max));\n\n const totalDays = getDaysInMonth(\n new Date(selectedYear, currentMonthIndex)\n );\n const daysArray = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n\n setDay(selectedDay);\n setMonth(selectedMonth);\n setYear(selectedYear);\n setYears(allYears);\n setDays(daysArray);\n setHour(format(selectedDate, \"HH\"));\n setMinute(format(selectedDate, \"mm\"));\n setInitComplete(true);\n\n setTimeout(() => bottomSheetRef.current?.present(), 10);\n },\n [minDate, maxDate, fullMonths]\n );\n\n useImperativeHandle(ref, () => ({ show }), [show]);\n\n const handleSetDate = () => {\n const monthIndex = fullMonths.findIndex((m) => m === month);\n const finalDateStr = `${year}-${(monthIndex + 1)\n .toString()\n .padStart(2, \"0\")}-${day}`;\n\n const finalDate = showTimePicker\n ? parse(\n `${finalDateStr} ${hour}:${minute}`,\n \"yyyy-MM-dd HH:mm\",\n new Date()\n )\n : parse(finalDateStr, \"yyyy-MM-dd\", new Date());\n\n const minDateTime = minDate\n ? startOfDay(parse(minDate, \"yyyy-MM-dd\", new Date()))\n : null;\n const maxDateTime = maxDate\n ? startOfDay(parse(maxDate, \"yyyy-MM-dd\", new Date()))\n : null;\n\n if (\n (minDateTime && isBefore(startOfDay(finalDate), minDateTime)) ||\n (maxDateTime && isAfter(startOfDay(finalDate), maxDateTime))\n ) {\n return;\n }\n\n const selectedMonthIndex = fullMonths.findIndex((m) => m === month);\n const formattedDate = showTimePicker\n ? `${day} ${shortMonths[selectedMonthIndex]} ${year} ${hour}:${minute}`\n : `${day} ${fullMonths[selectedMonthIndex]} ${year}`;\n\n onChange(formattedDate);\n bottomSheetRef.current?.close();\n };\n\n const handleMonthChange = (val: string) => {\n const fullMonth = showTimePicker\n ? (fullMonths.find((m) => m.startsWith(val)) ?? val)\n : val;\n const changedMonthIndex = fullMonths.findIndex((m) => m === fullMonth);\n const totalDays = getDaysInMonth(new Date(year, changedMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setMonth(fullMonth);\n setDays(newDays);\n };\n\n const handleYearChange = (val: number) => {\n const yearMonthIndex = fullMonths.findIndex((m) => m === month);\n const totalDays = getDaysInMonth(new Date(val, yearMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setYear(val);\n setDays(newDays);\n };\n\n const findSelectedDayByIndex = days.findIndex((val) => val === day);\n const findSelectedMonthByIndex = displayMonths.findIndex((val) =>\n showTimePicker ? month.startsWith(val) : val === month\n );\n const findSelectedYearByIndex = years.findIndex((val) => val === year);\n const hours = Array.from({ length: 24 }, (_, i) => `${i}`.padStart(2, \"0\"));\n const minutes = Array.from({ length: 60 }, (_, i) =>\n `${i}`.padStart(2, \"0\")\n );\n\n const dateValue = useMemo(() => {\n if (value) {\n return value;\n }\n return placeholder || \"Select Date\";\n }, [value, placeholder]);\n\n const handleLayout = (e?: LayoutChangeEvent) => {\n setHeight(e?.nativeEvent?.layout?.height || 180);\n };\n\n return (\n <>\n <View style={styles.container}>\n {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}\n {subText && (\n <Text style={[styles.subText, subTextStyle]}>{subText}</Text>\n )}\n <TouchableOpacity\n style={[styles.input, errors && styles.inputError, inputStyle]}\n onPress={() => show(value)}\n >\n <Text\n style={[\n styles.inputText,\n !value && styles.inputTextPlaceholder,\n inputTextStyle,\n ]}\n >\n {dateValue}\n </Text>\n </TouchableOpacity>\n {errors && errors.length > 0 && (\n <Text style={[styles.errorText, errorStyle]}>{errors[0]}</Text>\n )}\n </View>\n\n <BottomSheetModal\n ref={bottomSheetRef}\n snapPoints={[\"50%\"]}\n backgroundStyle={{ backgroundColor: \"#fff\" }}\n enableDynamicSizing={false}\n backdropComponent={(props) => (\n <BottomSheetBackdrop\n {...props}\n disappearsOnIndex={-1}\n appearsOnIndex={0}\n />\n )}\n enableContentPanningGesture={false}\n enableHandlePanningGesture={false}\n enablePanDownToClose={false}\n >\n {initComplete && (\n <View style={styles.modalContent}>\n <View>\n <Text style={styles.modalTitle}>\n Select Date {showTimePicker ? \"& Time\" : \"\"}\n </Text>\n </View>\n <View style={styles.pickerContainer} onLayout={handleLayout}>\n {/* Day */}\n <ScrollPicker\n dataSource={days}\n selectedIndex={findSelectedDayByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === day ? styles.pickerItemBold : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setDay(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Month */}\n <ScrollPicker\n dataSource={displayMonths}\n selectedIndex={findSelectedMonthByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === (showTimePicker ? month.slice(0, 3) : month)\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleMonthChange(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Year */}\n <ScrollPicker\n dataSource={years}\n selectedIndex={findSelectedYearByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === year\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleYearChange(value as number)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {showTimePicker && (\n <>\n <ScrollPicker\n dataSource={hours}\n selectedIndex={hours.findIndex((val) => val === hour)}\n renderItem={(data) => (\n <Text\n style={\n data === hour\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setHour(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n <ScrollPicker\n dataSource={minutes}\n selectedIndex={minutes.findIndex((val) => val === minute)}\n renderItem={(data) => (\n <Text\n style={\n data === minute\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setMinute(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n </>\n )}\n </View>\n <View\n style={[\n styles.buttonContainer,\n {\n paddingBottom: Platform.OS === \"ios\" ? paddingBottom : 20,\n },\n ]}\n >\n <InternalButton\n onPress={() => bottomSheetRef.current?.close()}\n outline\n style={cancelButtonStyle}\n textStyle={cancelButtonTextStyle}\n >\n Cancel\n </InternalButton>\n <InternalButton\n onPress={handleSetDate}\n style={buttonStyle}\n textStyle={buttonTextStyle}\n >\n Save\n </InternalButton>\n </View>\n </View>\n )}\n </BottomSheetModal>\n </>\n );\n }\n);\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: \"column\",\n gap: 8,\n },\n label: {\n fontSize: 14,\n color: \"#6B7280\",\n },\n subText: {\n fontSize: 14,\n color: \"#6B7280\",\n width: \"95%\",\n },\n input: {\n fontSize: 16,\n color: \"#000\",\n backgroundColor: \"#F3F4F6\",\n borderRadius: 16,\n padding: 14,\n shadowColor: \"#000\",\n shadowOffset: {\n width: 0,\n height: 2,\n },\n shadowOpacity: 0.1,\n shadowRadius: 3,\n elevation: 2,\n },\n inputError: {\n borderWidth: 1,\n borderColor: \"#EF4444\",\n },\n inputText: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n inputTextPlaceholder: {\n color: \"#9CA3AF\",\n },\n errorText: {\n fontSize: 12,\n color: \"#EF4444\",\n fontWeight: \"bold\",\n },\n modalContent: {\n flexDirection: \"column\",\n gap: 12,\n marginHorizontal: 24,\n flex: 1,\n },\n modalTitle: {\n fontSize: 20,\n fontWeight: \"bold\",\n color: \"#1F2937\",\n },\n pickerContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n paddingVertical: 16,\n flex: 1,\n },\n pickerItem: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n pickerItemBold: {\n fontSize: 16,\n color: \"#1F2937\",\n fontWeight: \"bold\",\n },\n buttonContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: 24,\n paddingVertical: 16,\n backgroundColor: \"#fff\",\n },\n button: {\n flex: 1,\n backgroundColor: \"#3B82F6\",\n borderRadius: 12,\n paddingVertical: 14,\n paddingHorizontal: 20,\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n buttonOutline: {\n backgroundColor: \"transparent\",\n borderWidth: 1,\n borderColor: \"#3B82F6\",\n },\n buttonText: {\n color: \"#fff\",\n fontSize: 16,\n fontWeight: \"600\",\n },\n buttonTextOutline: {\n color: \"#3B82F6\",\n },\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAOO;AACP,0BASO;AACP,sBASO;AACP,kDAAyB;AACzB,0BAAsD;AACtD,4CAAkC;AA6BlC,IAAM,iBAMD,CAAC,EAAE,SAAS,UAAU,SAAS,OAAO,UAAU,MAAM;AACzD,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,CAAC,OAAO,QAAQ,WAAW,OAAO,eAAe,KAAK;AAAA;AAAA,IAE7D,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW,OAAO;AAAA,UAClB;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EACF;AAEJ;AAEA,IAAM,iBAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,WAAU,oBAAI,KAAK,GAAE,YAAY;AACvC,UAAM,qBAAiB,qBAAyB,IAAI;AACpD,UAAM,EAAE,QAAQ,cAAc,QAAI,yDAAkB;AAEpD,UAAM,iBAAa;AAAA,MACjB,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,kBAAc;AAAA,MAClB,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IACH;AACA,UAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,IAAI;AACnC,UAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,SAAS;AAC5C,UAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,OAAO;AACxC,UAAM,CAAC,MAAM,OAAO,QAAI,uBAAmB,CAAC,CAAC;AAC7C,UAAM,CAAC,OAAO,QAAQ,QAAI,uBAAmB,CAAC,CAAC;AAC/C,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AACtD,UAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,IAAI;AACrC,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,IAAI;AACzC,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,GAAG;AAExC,UAAM,gBAAgB,iBAAiB,cAAc;AAErD,UAAM,WAAO;AAAA,MACX,CAAC,gBAAyB;AACxB,cAAM,eAAe,kBACjB,uBAAM,aAAa,cAAc,oBAAI,KAAK,CAAC,IAC3C,oBAAI,KAAK;AACb,cAAM,kBAAc,wBAAO,cAAc,IAAI;AAC7C,cAAM,oBAAoB,aAAa,SAAS;AAChD,cAAM,gBAAgB,WAAW,iBAAiB;AAClD,cAAM,mBAAe,yBAAQ,YAAY;AAEzC,cAAM,MAAM,cACR,uBAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,QACvC,0BAAS,oBAAI,KAAK,GAAG,GAAG;AAC5B,cAAM,MAAM,cACR,uBAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,IACvC,oBAAI,KAAK;AAEb,cAAM,WAAW,MAAM;AAAA,UACrB,EAAE,QAAQ,IAAI;AAAA,UACd,CAAC,GAAG,MAAM,UAAU;AAAA,QACtB,EAAE,OAAO,CAAC,MAAM,SAAK,yBAAQ,GAAG,KAAK,SAAK,yBAAQ,GAAG,CAAC;AAEtD,cAAM,gBAAY;AAAA,UAChB,IAAI,KAAK,cAAc,iBAAiB;AAAA,QAC1C;AACA,cAAM,YAAY,MAAM;AAAA,UAAK,EAAE,QAAQ,UAAU;AAAA,UAAG,CAAC,GAAG,MACtD,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,QAC5B;AAEA,eAAO,WAAW;AAClB,iBAAS,aAAa;AACtB,gBAAQ,YAAY;AACpB,iBAAS,QAAQ;AACjB,gBAAQ,SAAS;AACjB,oBAAQ,wBAAO,cAAc,IAAI,CAAC;AAClC,sBAAU,wBAAO,cAAc,IAAI,CAAC;AACpC,wBAAgB,IAAI;AAEpB,mBAAW,MAAM,eAAe,SAAS,QAAQ,GAAG,EAAE;AAAA,MACxD;AAAA,MACA,CAAC,SAAS,SAAS,UAAU;AAAA,IAC/B;AAEA,0CAAoB,KAAK,OAAO,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;AAEjD,UAAM,gBAAgB,MAAM;AAC1B,YAAM,aAAa,WAAW,UAAU,CAAC,MAAM,MAAM,KAAK;AAC1D,YAAM,eAAe,GAAG,IAAI,KAAK,aAAa,GAC3C,SAAS,EACT,SAAS,GAAG,GAAG,CAAC,IAAI,GAAG;AAE1B,YAAM,YAAY,qBACd;AAAA,QACE,GAAG,YAAY,IAAI,IAAI,IAAI,MAAM;AAAA,QACjC;AAAA,QACA,oBAAI,KAAK;AAAA,MACX,QACA,uBAAM,cAAc,cAAc,oBAAI,KAAK,CAAC;AAEhD,YAAM,cAAc,cAChB,gCAAW,uBAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,CAAC,IACnD;AACJ,YAAM,cAAc,cAChB,gCAAW,uBAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,CAAC,IACnD;AAEJ,UACG,mBAAe,8BAAS,4BAAW,SAAS,GAAG,WAAW,KAC1D,mBAAe,6BAAQ,4BAAW,SAAS,GAAG,WAAW,GAC1D;AACA;AAAA,MACF;AAEA,YAAM,qBAAqB,WAAW,UAAU,CAAC,MAAM,MAAM,KAAK;AAClE,YAAM,gBAAgB,iBAClB,GAAG,GAAG,IAAI,YAAY,kBAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,MAAM,KACnE,GAAG,GAAG,IAAI,WAAW,kBAAkB,CAAC,IAAI,IAAI;AAEpD,eAAS,aAAa;AACtB,qBAAe,SAAS,MAAM;AAAA,IAChC;AAEA,UAAM,oBAAoB,CAAC,QAAgB;AACzC,YAAM,YAAY,iBACb,WAAW,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,KAAK,MAC9C;AACJ,YAAM,oBAAoB,WAAW,UAAU,CAAC,MAAM,MAAM,SAAS;AACrE,YAAM,gBAAY,gCAAe,IAAI,KAAK,MAAM,iBAAiB,CAAC;AAClE,YAAM,UAAU,MAAM;AAAA,QAAK,EAAE,QAAQ,UAAU;AAAA,QAAG,CAAC,GAAG,MACpD,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,MAC5B;AACA,eAAS,SAAS;AAClB,cAAQ,OAAO;AAAA,IACjB;AAEA,UAAM,mBAAmB,CAAC,QAAgB;AACxC,YAAM,iBAAiB,WAAW,UAAU,CAAC,MAAM,MAAM,KAAK;AAC9D,YAAM,gBAAY,gCAAe,IAAI,KAAK,KAAK,cAAc,CAAC;AAC9D,YAAM,UAAU,MAAM;AAAA,QAAK,EAAE,QAAQ,UAAU;AAAA,QAAG,CAAC,GAAG,MACpD,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,MAC5B;AACA,cAAQ,GAAG;AACX,cAAQ,OAAO;AAAA,IACjB;AAEA,UAAM,yBAAyB,KAAK,UAAU,CAAC,QAAQ,QAAQ,GAAG;AAClE,UAAM,2BAA2B,cAAc;AAAA,MAAU,CAAC,QACxD,iBAAiB,MAAM,WAAW,GAAG,IAAI,QAAQ;AAAA,IACnD;AACA,UAAM,0BAA0B,MAAM,UAAU,CAAC,QAAQ,QAAQ,IAAI;AACrE,UAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,GAAG,CAAC;AAC1E,UAAM,UAAU,MAAM;AAAA,MAAK,EAAE,QAAQ,GAAG;AAAA,MAAG,CAAC,GAAG,MAC7C,GAAG,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,IACxB;AAEA,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAI,OAAO;AACT,eAAO;AAAA,MACT;AACA,aAAO,eAAe;AAAA,IACxB,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,UAAM,eAAe,CAAC,MAA0B;AAC9C,gBAAU,GAAG,aAAa,QAAQ,UAAU,GAAG;AAAA,IACjD;AAEA,WACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,aACjB,SAAS,6BAAAA,QAAA,cAAC,4BAAK,OAAO,CAAC,OAAO,OAAO,UAAU,KAAI,KAAM,GACzD,WACC,6BAAAA,QAAA,cAAC,4BAAK,OAAO,CAAC,OAAO,SAAS,YAAY,KAAI,OAAQ,GAExD,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,CAAC,OAAO,OAAO,UAAU,OAAO,YAAY,UAAU;AAAA,QAC7D,SAAS,MAAM,KAAK,KAAK;AAAA;AAAA,MAEzB,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,CAAC,SAAS,OAAO;AAAA,YACjB;AAAA,UACF;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IACF,GACC,UAAU,OAAO,SAAS,KACzB,6BAAAA,QAAA,cAAC,4BAAK,OAAO,CAAC,OAAO,WAAW,UAAU,KAAI,OAAO,CAAC,CAAE,CAE5D,GAEA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,YAAY,CAAC,KAAK;AAAA,QAClB,iBAAiB,EAAE,iBAAiB,OAAO;AAAA,QAC3C,qBAAqB;AAAA,QACrB,mBAAmB,CAAC,UAClB,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,mBAAmB;AAAA,YACnB,gBAAgB;AAAA;AAAA,QAClB;AAAA,QAEF,6BAA6B;AAAA,QAC7B,4BAA4B;AAAA,QAC5B,sBAAsB;AAAA;AAAA,MAErB,gBACC,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,gBAClB,6BAAAA,QAAA,cAAC,gCACC,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,cAAY,gBACjB,iBAAiB,WAAW,EAC3C,CACF,GACA,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,iBAAiB,UAAU,gBAE7C,6BAAAA,QAAA;AAAA,QAAC,4CAAAC;AAAA,QAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,YAAY,CAAC,SACX,6BAAAD,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,MAAM,OAAO,iBAAiB,OAAO;AAAA;AAAA,YAG/C;AAAA,UACH;AAAA,UAEF,eAAe,CAACE,WAAU,OAAOA,MAAe;AAAA,UAChD,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GAEA,6BAAAF,QAAA;AAAA,QAAC,4CAAAC;AAAA,QAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,YAAY,CAAC,SACX,6BAAAD,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,OACE,UAAU,iBAAiB,MAAM,MAAM,GAAG,CAAC,IAAI,SAC3C,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACE,WAAU,kBAAkBA,MAAe;AAAA,UAC3D,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GAEA,6BAAAF,QAAA;AAAA,QAAC,4CAAAC;AAAA,QAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,YAAY,CAAC,SACX,6BAAAD,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,OACL,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACE,WAAU,iBAAiBA,MAAe;AAAA,UAC1D,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GACC,kBACC,6BAAAF,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,QAAC,4CAAAC;AAAA,QAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe,MAAM,UAAU,CAAC,QAAQ,QAAQ,IAAI;AAAA,UACpD,YAAY,CAAC,SACX,6BAAAD,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,OACL,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACE,WAAU,QAAQA,MAAe;AAAA,UACjD,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GACA,6BAAAF,QAAA;AAAA,QAAC,4CAAAC;AAAA,QAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe,QAAQ,UAAU,CAAC,QAAQ,QAAQ,MAAM;AAAA,UACxD,YAAY,CAAC,SACX,6BAAAD,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,SACL,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACE,WAAU,UAAUA,MAAe;AAAA,UACnD,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,CACF,CAEJ,GACA,6BAAAF,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP;AAAA,cACE,eAAe,6BAAS,OAAO,QAAQ,gBAAgB;AAAA,YACzD;AAAA,UACF;AAAA;AAAA,QAEA,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,eAAe,SAAS,MAAM;AAAA,YAC7C,SAAO;AAAA,YACP,OAAO;AAAA,YACP,WAAW;AAAA;AAAA,UACZ;AAAA,QAED;AAAA,QACA,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA;AAAA,UACZ;AAAA,QAED;AAAA,MACF,CACF;AAAA,IAEJ,CACF;AAAA,EAEJ;AACF;AAEA,IAAM,SAAS,+BAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,EACP;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,kBAAkB;AAAA,IAClB,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,EACT;AACF,CAAC;AAED,IAAO,qBAAQ;","names":["React","ScrollPicker","value"]}
1
+ {"version":3,"sources":["../src/index.tsx","../src/DatePicker.tsx"],"sourcesContent":["export { default as DatePicker } from \"./DatePicker\";\nexport type { DatePickerRef, DatePickerProps } from \"./DatePicker\";\n","import React, {\n useState,\n useImperativeHandle,\n forwardRef,\n useCallback,\n useRef,\n useMemo,\n} from \"react\";\nimport {\n View,\n TouchableOpacity,\n Platform,\n LayoutChangeEvent,\n Text,\n StyleSheet,\n ViewStyle,\n TextStyle,\n} from \"react-native\";\nimport {\n format,\n parse,\n getDaysInMonth,\n subYears,\n isBefore,\n isAfter,\n getYear,\n startOfDay,\n} from \"date-fns\";\nimport ScrollPicker from \"react-native-wheel-scrollview-picker\";\nimport { BottomSheetModal, BottomSheetBackdrop } from \"@gorhom/bottom-sheet\";\n\nexport interface DatePickerRef {\n show: (initialDate?: string) => void;\n}\n\nexport interface DatePickerProps {\n value?: string;\n label?: string;\n placeholder?: string;\n onChange: (date: string) => void;\n minDate?: string;\n maxDate?: string;\n showTimePicker?: boolean;\n dateFormat?: string; // Custom format (e.g., \"yyyy-MM-dd\", \"dd/MM/yyyy\", \"MMM dd, yyyy\")\n subText?: string | React.ReactNode;\n errors?: string[];\n // Styling props\n inputStyle?: ViewStyle;\n inputTextStyle?: TextStyle;\n labelStyle?: TextStyle;\n errorStyle?: TextStyle;\n subTextStyle?: TextStyle;\n highlightColor?: string;\n buttonStyle?: ViewStyle;\n buttonTextStyle?: TextStyle;\n cancelButtonStyle?: ViewStyle;\n cancelButtonTextStyle?: TextStyle;\n}\n\nconst InternalButton: React.FC<{\n onPress: () => void;\n children: string;\n outline?: boolean;\n style?: ViewStyle;\n textStyle?: TextStyle;\n}> = ({ onPress, children, outline, style, textStyle }) => {\n return (\n <TouchableOpacity\n onPress={onPress}\n style={[styles.button, outline && styles.buttonOutline, style]}\n >\n <Text\n style={[\n styles.buttonText,\n outline && styles.buttonTextOutline,\n textStyle,\n ]}\n >\n {children}\n </Text>\n </TouchableOpacity>\n );\n};\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (\n {\n value,\n label,\n placeholder,\n onChange,\n minDate,\n maxDate,\n showTimePicker = false,\n dateFormat,\n subText,\n errors,\n inputStyle,\n inputTextStyle,\n labelStyle,\n errorStyle,\n subTextStyle,\n highlightColor = \"#E5E5E5\",\n buttonStyle,\n buttonTextStyle,\n cancelButtonStyle,\n cancelButtonTextStyle,\n },\n ref\n ) => {\n const nowYear = new Date().getFullYear();\n const bottomSheetRef = useRef<BottomSheetModal>(null);\n\n // Default formats if not provided\n const defaultFormat = useMemo(() => {\n if (dateFormat) return dateFormat;\n return showTimePicker ? \"dd MMM yyyy HH:mm\" : \"dd MMMM yyyy\";\n }, [dateFormat, showTimePicker]);\n\n const fullMonths = useMemo(\n () => [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n []\n );\n\n const shortMonths = useMemo(\n () => [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ],\n []\n );\n const [day, setDay] = useState(\"01\");\n const [month, setMonth] = useState(\"January\");\n const [year, setYear] = useState(nowYear);\n const [days, setDays] = useState<string[]>([]);\n const [years, setYears] = useState<number[]>([]);\n const [initComplete, setInitComplete] = useState(false);\n const [hour, setHour] = useState(\"00\");\n const [minute, setMinute] = useState(\"00\");\n const [height, setHeight] = useState(180);\n\n const displayMonths = showTimePicker ? shortMonths : fullMonths;\n\n const show = useCallback(\n (initialDate?: string) => {\n let selectedDate: Date;\n if (initialDate) {\n try {\n selectedDate = parse(initialDate, defaultFormat, new Date());\n // If parsing fails or returns invalid date, use current date\n if (!selectedDate || isNaN(selectedDate.getTime())) {\n selectedDate = new Date();\n }\n } catch {\n selectedDate = new Date();\n }\n } else {\n selectedDate = new Date();\n }\n\n const selectedDay = format(selectedDate, \"dd\");\n const currentMonthIndex = selectedDate.getMonth();\n const selectedMonth = fullMonths[currentMonthIndex];\n const selectedYear = getYear(selectedDate);\n\n const min = minDate\n ? parse(minDate, \"yyyy-MM-dd\", new Date())\n : subYears(new Date(), 200);\n const max = maxDate\n ? parse(maxDate, \"yyyy-MM-dd\", new Date())\n : new Date();\n\n const allYears = Array.from(\n { length: 200 },\n (_, i) => nowYear - i\n ).filter((y) => y >= getYear(min) && y <= getYear(max));\n\n const totalDays = getDaysInMonth(\n new Date(selectedYear, currentMonthIndex)\n );\n const daysArray = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n\n setDay(selectedDay);\n setMonth(selectedMonth);\n setYear(selectedYear);\n setYears(allYears);\n setDays(daysArray);\n setHour(format(selectedDate, \"HH\"));\n setMinute(format(selectedDate, \"mm\"));\n setInitComplete(true);\n\n setTimeout(() => bottomSheetRef.current?.present(), 10);\n },\n [minDate, maxDate, fullMonths, showTimePicker, defaultFormat]\n );\n\n useImperativeHandle(ref, () => ({ show }), [show]);\n\n const handleSetDate = () => {\n const monthIndex = fullMonths.findIndex((m) => m === month);\n const finalDateStr = `${year}-${(monthIndex + 1)\n .toString()\n .padStart(2, \"0\")}-${day}`;\n\n const finalDate = showTimePicker\n ? parse(\n `${finalDateStr} ${hour}:${minute}`,\n \"yyyy-MM-dd HH:mm\",\n new Date()\n )\n : parse(finalDateStr, \"yyyy-MM-dd\", new Date());\n\n const minDateTime = minDate\n ? startOfDay(parse(minDate, \"yyyy-MM-dd\", new Date()))\n : null;\n const maxDateTime = maxDate\n ? startOfDay(parse(maxDate, \"yyyy-MM-dd\", new Date()))\n : null;\n\n if (\n (minDateTime && isBefore(startOfDay(finalDate), minDateTime)) ||\n (maxDateTime && isAfter(startOfDay(finalDate), maxDateTime))\n ) {\n return;\n }\n\n // Format the date according to custom format or default\n const formattedDate = format(finalDate, defaultFormat);\n\n onChange(formattedDate);\n bottomSheetRef.current?.close();\n };\n\n const handleMonthChange = (val: string) => {\n const fullMonth = showTimePicker\n ? (fullMonths.find((m) => m.startsWith(val)) ?? val)\n : val;\n const changedMonthIndex = fullMonths.findIndex((m) => m === fullMonth);\n const totalDays = getDaysInMonth(new Date(year, changedMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setMonth(fullMonth);\n setDays(newDays);\n };\n\n const handleYearChange = (val: number) => {\n const yearMonthIndex = fullMonths.findIndex((m) => m === month);\n const totalDays = getDaysInMonth(new Date(val, yearMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setYear(val);\n setDays(newDays);\n };\n\n const findSelectedDayByIndex = days.findIndex((val) => val === day);\n const findSelectedMonthByIndex = displayMonths.findIndex((val) =>\n showTimePicker ? month.startsWith(val) : val === month\n );\n const findSelectedYearByIndex = years.findIndex((val) => val === year);\n const hours = Array.from({ length: 24 }, (_, i) => `${i}`.padStart(2, \"0\"));\n const minutes = Array.from({ length: 60 }, (_, i) =>\n `${i}`.padStart(2, \"0\")\n );\n\n const dateValue = useMemo(() => {\n if (value) {\n return value;\n }\n return placeholder || \"Select Date\";\n }, [value, placeholder]);\n\n const handleLayout = (e?: LayoutChangeEvent) => {\n setHeight(e?.nativeEvent?.layout?.height || 180);\n };\n\n return (\n <>\n <View style={styles.container}>\n {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}\n {subText && (\n <Text style={[styles.subText, subTextStyle]}>{subText}</Text>\n )}\n <TouchableOpacity\n style={[styles.input, errors && styles.inputError, inputStyle]}\n onPress={() => show(value)}\n >\n <Text\n style={[\n styles.inputText,\n !value && styles.inputTextPlaceholder,\n inputTextStyle,\n ]}\n >\n {dateValue}\n </Text>\n </TouchableOpacity>\n {errors && errors.length > 0 && (\n <Text style={[styles.errorText, errorStyle]}>{errors[0]}</Text>\n )}\n </View>\n\n <BottomSheetModal\n ref={bottomSheetRef}\n snapPoints={[\"50%\"]}\n backgroundStyle={{ backgroundColor: \"#fff\" }}\n enableDynamicSizing={false}\n backdropComponent={(props) => (\n <BottomSheetBackdrop\n {...props}\n disappearsOnIndex={-1}\n appearsOnIndex={0}\n />\n )}\n enableContentPanningGesture={false}\n enableHandlePanningGesture={false}\n enablePanDownToClose={false}\n >\n {initComplete && (\n <View style={styles.modalContent}>\n <View>\n <Text style={styles.modalTitle}>\n Select Date {showTimePicker ? \"& Time\" : \"\"}\n </Text>\n </View>\n <View style={styles.pickerContainer} onLayout={handleLayout}>\n {/* Day */}\n <ScrollPicker\n dataSource={days}\n selectedIndex={findSelectedDayByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === day ? styles.pickerItemBold : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setDay(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Month */}\n <ScrollPicker\n dataSource={displayMonths}\n selectedIndex={findSelectedMonthByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === (showTimePicker ? month.slice(0, 3) : month)\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleMonthChange(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Year */}\n <ScrollPicker\n dataSource={years}\n selectedIndex={findSelectedYearByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === year\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleYearChange(value as number)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {showTimePicker && (\n <>\n <ScrollPicker\n dataSource={hours}\n selectedIndex={hours.findIndex((val) => val === hour)}\n renderItem={(data) => (\n <Text\n style={\n data === hour\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setHour(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n <ScrollPicker\n dataSource={minutes}\n selectedIndex={minutes.findIndex((val) => val === minute)}\n renderItem={(data) => (\n <Text\n style={\n data === minute\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setMinute(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n </>\n )}\n </View>\n <View\n style={[\n styles.buttonContainer,\n {\n paddingBottom: Platform.OS === \"ios\" ? 20 : 20,\n },\n ]}\n >\n <InternalButton\n onPress={() => bottomSheetRef.current?.close()}\n outline\n style={cancelButtonStyle}\n textStyle={cancelButtonTextStyle}\n >\n Cancel\n </InternalButton>\n <InternalButton\n onPress={handleSetDate}\n style={buttonStyle}\n textStyle={buttonTextStyle}\n >\n Save\n </InternalButton>\n </View>\n </View>\n )}\n </BottomSheetModal>\n </>\n );\n }\n);\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: \"column\",\n gap: 8,\n },\n label: {\n fontSize: 14,\n color: \"#6B7280\",\n },\n subText: {\n fontSize: 14,\n color: \"#6B7280\",\n width: \"95%\",\n },\n input: {\n fontSize: 16,\n color: \"#000\",\n backgroundColor: \"#F3F4F6\",\n borderRadius: 16,\n padding: 14,\n shadowColor: \"#000\",\n shadowOffset: {\n width: 0,\n height: 2,\n },\n shadowOpacity: 0.1,\n shadowRadius: 3,\n elevation: 2,\n },\n inputError: {\n borderWidth: 1,\n borderColor: \"#EF4444\",\n },\n inputText: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n inputTextPlaceholder: {\n color: \"#9CA3AF\",\n },\n errorText: {\n fontSize: 12,\n color: \"#EF4444\",\n fontWeight: \"bold\",\n },\n modalContent: {\n flexDirection: \"column\",\n gap: 12,\n marginHorizontal: 24,\n flex: 1,\n },\n modalTitle: {\n fontSize: 20,\n fontWeight: \"bold\",\n color: \"#1F2937\",\n },\n pickerContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n paddingVertical: 16,\n flex: 1,\n },\n pickerItem: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n pickerItemBold: {\n fontSize: 16,\n color: \"#1F2937\",\n fontWeight: \"bold\",\n },\n buttonContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: 24,\n paddingVertical: 16,\n backgroundColor: \"#fff\",\n },\n button: {\n flex: 1,\n backgroundColor: \"#3B82F6\",\n borderRadius: 12,\n paddingVertical: 14,\n paddingHorizontal: 20,\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n buttonOutline: {\n backgroundColor: \"transparent\",\n borderWidth: 1,\n borderColor: \"#3B82F6\",\n },\n buttonText: {\n color: \"#fff\",\n fontSize: 16,\n fontWeight: \"600\",\n },\n buttonTextOutline: {\n color: \"#3B82F6\",\n },\n});\n\nexport default DatePicker;\n"],"mappings":"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","names":["React","ScrollPicker","value"]}
package/dist/index.mjs CHANGED
@@ -26,7 +26,6 @@ import {
26
26
  } from "date-fns";
27
27
  import ScrollPicker from "react-native-wheel-scrollview-picker";
28
28
  import { BottomSheetModal, BottomSheetBackdrop } from "@gorhom/bottom-sheet";
29
- import { useSafeAreaInsets } from "react-native-safe-area-context";
30
29
  var InternalButton = ({ onPress, children, outline, style, textStyle }) => {
31
30
  return /* @__PURE__ */ React.createElement(
32
31
  TouchableOpacity,
@@ -56,6 +55,7 @@ var DatePicker = forwardRef(
56
55
  minDate,
57
56
  maxDate,
58
57
  showTimePicker = false,
58
+ dateFormat,
59
59
  subText,
60
60
  errors,
61
61
  inputStyle,
@@ -71,7 +71,10 @@ var DatePicker = forwardRef(
71
71
  }, ref) => {
72
72
  const nowYear = (/* @__PURE__ */ new Date()).getFullYear();
73
73
  const bottomSheetRef = useRef(null);
74
- const { bottom: paddingBottom } = useSafeAreaInsets();
74
+ const defaultFormat = useMemo(() => {
75
+ if (dateFormat) return dateFormat;
76
+ return showTimePicker ? "dd MMM yyyy HH:mm" : "dd MMMM yyyy";
77
+ }, [dateFormat, showTimePicker]);
75
78
  const fullMonths = useMemo(
76
79
  () => [
77
80
  "January",
@@ -118,7 +121,19 @@ var DatePicker = forwardRef(
118
121
  const displayMonths = showTimePicker ? shortMonths : fullMonths;
119
122
  const show = useCallback(
120
123
  (initialDate) => {
121
- const selectedDate = initialDate ? parse(initialDate, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : /* @__PURE__ */ new Date();
124
+ let selectedDate;
125
+ if (initialDate) {
126
+ try {
127
+ selectedDate = parse(initialDate, defaultFormat, /* @__PURE__ */ new Date());
128
+ if (!selectedDate || isNaN(selectedDate.getTime())) {
129
+ selectedDate = /* @__PURE__ */ new Date();
130
+ }
131
+ } catch {
132
+ selectedDate = /* @__PURE__ */ new Date();
133
+ }
134
+ } else {
135
+ selectedDate = /* @__PURE__ */ new Date();
136
+ }
122
137
  const selectedDay = format(selectedDate, "dd");
123
138
  const currentMonthIndex = selectedDate.getMonth();
124
139
  const selectedMonth = fullMonths[currentMonthIndex];
@@ -146,7 +161,7 @@ var DatePicker = forwardRef(
146
161
  setInitComplete(true);
147
162
  setTimeout(() => bottomSheetRef.current?.present(), 10);
148
163
  },
149
- [minDate, maxDate, fullMonths]
164
+ [minDate, maxDate, fullMonths, showTimePicker, defaultFormat]
150
165
  );
151
166
  useImperativeHandle(ref, () => ({ show }), [show]);
152
167
  const handleSetDate = () => {
@@ -162,8 +177,7 @@ var DatePicker = forwardRef(
162
177
  if (minDateTime && isBefore(startOfDay(finalDate), minDateTime) || maxDateTime && isAfter(startOfDay(finalDate), maxDateTime)) {
163
178
  return;
164
179
  }
165
- const selectedMonthIndex = fullMonths.findIndex((m) => m === month);
166
- const formattedDate = showTimePicker ? `${day} ${shortMonths[selectedMonthIndex]} ${year} ${hour}:${minute}` : `${day} ${fullMonths[selectedMonthIndex]} ${year}`;
180
+ const formattedDate = format(finalDate, defaultFormat);
167
181
  onChange(formattedDate);
168
182
  bottomSheetRef.current?.close();
169
183
  };
@@ -344,7 +358,7 @@ var DatePicker = forwardRef(
344
358
  style: [
345
359
  styles.buttonContainer,
346
360
  {
347
- paddingBottom: Platform.OS === "ios" ? paddingBottom : 20
361
+ paddingBottom: Platform.OS === "ios" ? 20 : 20
348
362
  }
349
363
  ]
350
364
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/DatePicker.tsx"],"sourcesContent":["import React, {\n useState,\n useImperativeHandle,\n forwardRef,\n useCallback,\n useRef,\n useMemo,\n} from \"react\";\nimport {\n View,\n TouchableOpacity,\n Platform,\n LayoutChangeEvent,\n Text,\n StyleSheet,\n ViewStyle,\n TextStyle,\n} from \"react-native\";\nimport {\n format,\n parse,\n getDaysInMonth,\n subYears,\n isBefore,\n isAfter,\n getYear,\n startOfDay,\n} from \"date-fns\";\nimport ScrollPicker from \"react-native-wheel-scrollview-picker\";\nimport { BottomSheetModal, BottomSheetBackdrop } from \"@gorhom/bottom-sheet\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nexport interface DatePickerRef {\n show: (initialDate?: string) => void;\n}\n\nexport interface DatePickerProps {\n value?: string;\n label?: string;\n placeholder?: string;\n onChange: (date: string) => void;\n minDate?: string;\n maxDate?: string;\n showTimePicker?: boolean;\n subText?: string | React.ReactNode;\n errors?: string[];\n // Styling props\n inputStyle?: ViewStyle;\n inputTextStyle?: TextStyle;\n labelStyle?: TextStyle;\n errorStyle?: TextStyle;\n subTextStyle?: TextStyle;\n highlightColor?: string;\n buttonStyle?: ViewStyle;\n buttonTextStyle?: TextStyle;\n cancelButtonStyle?: ViewStyle;\n cancelButtonTextStyle?: TextStyle;\n}\n\nconst InternalButton: React.FC<{\n onPress: () => void;\n children: string;\n outline?: boolean;\n style?: ViewStyle;\n textStyle?: TextStyle;\n}> = ({ onPress, children, outline, style, textStyle }) => {\n return (\n <TouchableOpacity\n onPress={onPress}\n style={[styles.button, outline && styles.buttonOutline, style]}\n >\n <Text\n style={[\n styles.buttonText,\n outline && styles.buttonTextOutline,\n textStyle,\n ]}\n >\n {children}\n </Text>\n </TouchableOpacity>\n );\n};\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (\n {\n value,\n label,\n placeholder,\n onChange,\n minDate,\n maxDate,\n showTimePicker = false,\n subText,\n errors,\n inputStyle,\n inputTextStyle,\n labelStyle,\n errorStyle,\n subTextStyle,\n highlightColor = \"#E5E5E5\",\n buttonStyle,\n buttonTextStyle,\n cancelButtonStyle,\n cancelButtonTextStyle,\n },\n ref\n ) => {\n const nowYear = new Date().getFullYear();\n const bottomSheetRef = useRef<BottomSheetModal>(null);\n const { bottom: paddingBottom } = useSafeAreaInsets();\n\n const fullMonths = useMemo(\n () => [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n []\n );\n\n const shortMonths = useMemo(\n () => [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ],\n []\n );\n const [day, setDay] = useState(\"01\");\n const [month, setMonth] = useState(\"January\");\n const [year, setYear] = useState(nowYear);\n const [days, setDays] = useState<string[]>([]);\n const [years, setYears] = useState<number[]>([]);\n const [initComplete, setInitComplete] = useState(false);\n const [hour, setHour] = useState(\"00\");\n const [minute, setMinute] = useState(\"00\");\n const [height, setHeight] = useState(180);\n\n const displayMonths = showTimePicker ? shortMonths : fullMonths;\n\n const show = useCallback(\n (initialDate?: string) => {\n const selectedDate = initialDate\n ? parse(initialDate, \"yyyy-MM-dd\", new Date())\n : new Date();\n const selectedDay = format(selectedDate, \"dd\");\n const currentMonthIndex = selectedDate.getMonth();\n const selectedMonth = fullMonths[currentMonthIndex];\n const selectedYear = getYear(selectedDate);\n\n const min = minDate\n ? parse(minDate, \"yyyy-MM-dd\", new Date())\n : subYears(new Date(), 200);\n const max = maxDate\n ? parse(maxDate, \"yyyy-MM-dd\", new Date())\n : new Date();\n\n const allYears = Array.from(\n { length: 200 },\n (_, i) => nowYear - i\n ).filter((y) => y >= getYear(min) && y <= getYear(max));\n\n const totalDays = getDaysInMonth(\n new Date(selectedYear, currentMonthIndex)\n );\n const daysArray = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n\n setDay(selectedDay);\n setMonth(selectedMonth);\n setYear(selectedYear);\n setYears(allYears);\n setDays(daysArray);\n setHour(format(selectedDate, \"HH\"));\n setMinute(format(selectedDate, \"mm\"));\n setInitComplete(true);\n\n setTimeout(() => bottomSheetRef.current?.present(), 10);\n },\n [minDate, maxDate, fullMonths]\n );\n\n useImperativeHandle(ref, () => ({ show }), [show]);\n\n const handleSetDate = () => {\n const monthIndex = fullMonths.findIndex((m) => m === month);\n const finalDateStr = `${year}-${(monthIndex + 1)\n .toString()\n .padStart(2, \"0\")}-${day}`;\n\n const finalDate = showTimePicker\n ? parse(\n `${finalDateStr} ${hour}:${minute}`,\n \"yyyy-MM-dd HH:mm\",\n new Date()\n )\n : parse(finalDateStr, \"yyyy-MM-dd\", new Date());\n\n const minDateTime = minDate\n ? startOfDay(parse(minDate, \"yyyy-MM-dd\", new Date()))\n : null;\n const maxDateTime = maxDate\n ? startOfDay(parse(maxDate, \"yyyy-MM-dd\", new Date()))\n : null;\n\n if (\n (minDateTime && isBefore(startOfDay(finalDate), minDateTime)) ||\n (maxDateTime && isAfter(startOfDay(finalDate), maxDateTime))\n ) {\n return;\n }\n\n const selectedMonthIndex = fullMonths.findIndex((m) => m === month);\n const formattedDate = showTimePicker\n ? `${day} ${shortMonths[selectedMonthIndex]} ${year} ${hour}:${minute}`\n : `${day} ${fullMonths[selectedMonthIndex]} ${year}`;\n\n onChange(formattedDate);\n bottomSheetRef.current?.close();\n };\n\n const handleMonthChange = (val: string) => {\n const fullMonth = showTimePicker\n ? (fullMonths.find((m) => m.startsWith(val)) ?? val)\n : val;\n const changedMonthIndex = fullMonths.findIndex((m) => m === fullMonth);\n const totalDays = getDaysInMonth(new Date(year, changedMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setMonth(fullMonth);\n setDays(newDays);\n };\n\n const handleYearChange = (val: number) => {\n const yearMonthIndex = fullMonths.findIndex((m) => m === month);\n const totalDays = getDaysInMonth(new Date(val, yearMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setYear(val);\n setDays(newDays);\n };\n\n const findSelectedDayByIndex = days.findIndex((val) => val === day);\n const findSelectedMonthByIndex = displayMonths.findIndex((val) =>\n showTimePicker ? month.startsWith(val) : val === month\n );\n const findSelectedYearByIndex = years.findIndex((val) => val === year);\n const hours = Array.from({ length: 24 }, (_, i) => `${i}`.padStart(2, \"0\"));\n const minutes = Array.from({ length: 60 }, (_, i) =>\n `${i}`.padStart(2, \"0\")\n );\n\n const dateValue = useMemo(() => {\n if (value) {\n return value;\n }\n return placeholder || \"Select Date\";\n }, [value, placeholder]);\n\n const handleLayout = (e?: LayoutChangeEvent) => {\n setHeight(e?.nativeEvent?.layout?.height || 180);\n };\n\n return (\n <>\n <View style={styles.container}>\n {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}\n {subText && (\n <Text style={[styles.subText, subTextStyle]}>{subText}</Text>\n )}\n <TouchableOpacity\n style={[styles.input, errors && styles.inputError, inputStyle]}\n onPress={() => show(value)}\n >\n <Text\n style={[\n styles.inputText,\n !value && styles.inputTextPlaceholder,\n inputTextStyle,\n ]}\n >\n {dateValue}\n </Text>\n </TouchableOpacity>\n {errors && errors.length > 0 && (\n <Text style={[styles.errorText, errorStyle]}>{errors[0]}</Text>\n )}\n </View>\n\n <BottomSheetModal\n ref={bottomSheetRef}\n snapPoints={[\"50%\"]}\n backgroundStyle={{ backgroundColor: \"#fff\" }}\n enableDynamicSizing={false}\n backdropComponent={(props) => (\n <BottomSheetBackdrop\n {...props}\n disappearsOnIndex={-1}\n appearsOnIndex={0}\n />\n )}\n enableContentPanningGesture={false}\n enableHandlePanningGesture={false}\n enablePanDownToClose={false}\n >\n {initComplete && (\n <View style={styles.modalContent}>\n <View>\n <Text style={styles.modalTitle}>\n Select Date {showTimePicker ? \"& Time\" : \"\"}\n </Text>\n </View>\n <View style={styles.pickerContainer} onLayout={handleLayout}>\n {/* Day */}\n <ScrollPicker\n dataSource={days}\n selectedIndex={findSelectedDayByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === day ? styles.pickerItemBold : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setDay(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Month */}\n <ScrollPicker\n dataSource={displayMonths}\n selectedIndex={findSelectedMonthByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === (showTimePicker ? month.slice(0, 3) : month)\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleMonthChange(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Year */}\n <ScrollPicker\n dataSource={years}\n selectedIndex={findSelectedYearByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === year\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleYearChange(value as number)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {showTimePicker && (\n <>\n <ScrollPicker\n dataSource={hours}\n selectedIndex={hours.findIndex((val) => val === hour)}\n renderItem={(data) => (\n <Text\n style={\n data === hour\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setHour(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n <ScrollPicker\n dataSource={minutes}\n selectedIndex={minutes.findIndex((val) => val === minute)}\n renderItem={(data) => (\n <Text\n style={\n data === minute\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setMinute(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n </>\n )}\n </View>\n <View\n style={[\n styles.buttonContainer,\n {\n paddingBottom: Platform.OS === \"ios\" ? paddingBottom : 20,\n },\n ]}\n >\n <InternalButton\n onPress={() => bottomSheetRef.current?.close()}\n outline\n style={cancelButtonStyle}\n textStyle={cancelButtonTextStyle}\n >\n Cancel\n </InternalButton>\n <InternalButton\n onPress={handleSetDate}\n style={buttonStyle}\n textStyle={buttonTextStyle}\n >\n Save\n </InternalButton>\n </View>\n </View>\n )}\n </BottomSheetModal>\n </>\n );\n }\n);\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: \"column\",\n gap: 8,\n },\n label: {\n fontSize: 14,\n color: \"#6B7280\",\n },\n subText: {\n fontSize: 14,\n color: \"#6B7280\",\n width: \"95%\",\n },\n input: {\n fontSize: 16,\n color: \"#000\",\n backgroundColor: \"#F3F4F6\",\n borderRadius: 16,\n padding: 14,\n shadowColor: \"#000\",\n shadowOffset: {\n width: 0,\n height: 2,\n },\n shadowOpacity: 0.1,\n shadowRadius: 3,\n elevation: 2,\n },\n inputError: {\n borderWidth: 1,\n borderColor: \"#EF4444\",\n },\n inputText: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n inputTextPlaceholder: {\n color: \"#9CA3AF\",\n },\n errorText: {\n fontSize: 12,\n color: \"#EF4444\",\n fontWeight: \"bold\",\n },\n modalContent: {\n flexDirection: \"column\",\n gap: 12,\n marginHorizontal: 24,\n flex: 1,\n },\n modalTitle: {\n fontSize: 20,\n fontWeight: \"bold\",\n color: \"#1F2937\",\n },\n pickerContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n paddingVertical: 16,\n flex: 1,\n },\n pickerItem: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n pickerItemBold: {\n fontSize: 16,\n color: \"#1F2937\",\n fontWeight: \"bold\",\n },\n buttonContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: 24,\n paddingVertical: 16,\n backgroundColor: \"#fff\",\n },\n button: {\n flex: 1,\n backgroundColor: \"#3B82F6\",\n borderRadius: 12,\n paddingVertical: 14,\n paddingHorizontal: 20,\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n buttonOutline: {\n backgroundColor: \"transparent\",\n borderWidth: 1,\n borderColor: \"#3B82F6\",\n },\n buttonText: {\n color: \"#fff\",\n fontSize: 16,\n fontWeight: \"600\",\n },\n buttonTextOutline: {\n color: \"#3B82F6\",\n },\n});\n\nexport default DatePicker;\n"],"mappings":";AAAA,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,kBAAkB;AACzB,SAAS,kBAAkB,2BAA2B;AACtD,SAAS,yBAAyB;AA6BlC,IAAM,iBAMD,CAAC,EAAE,SAAS,UAAU,SAAS,OAAO,UAAU,MAAM;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,CAAC,OAAO,QAAQ,WAAW,OAAO,eAAe,KAAK;AAAA;AAAA,IAE7D;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW,OAAO;AAAA,UAClB;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EACF;AAEJ;AAEA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,WAAU,oBAAI,KAAK,GAAE,YAAY;AACvC,UAAM,iBAAiB,OAAyB,IAAI;AACpD,UAAM,EAAE,QAAQ,cAAc,IAAI,kBAAkB;AAEpD,UAAM,aAAa;AAAA,MACjB,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,cAAc;AAAA,MAClB,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IACH;AACA,UAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AACnC,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,OAAO;AACxC,UAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,CAAC,CAAC;AAC7C,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAmB,CAAC,CAAC;AAC/C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI;AACrC,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,GAAG;AAExC,UAAM,gBAAgB,iBAAiB,cAAc;AAErD,UAAM,OAAO;AAAA,MACX,CAAC,gBAAyB;AACxB,cAAM,eAAe,cACjB,MAAM,aAAa,cAAc,oBAAI,KAAK,CAAC,IAC3C,oBAAI,KAAK;AACb,cAAM,cAAc,OAAO,cAAc,IAAI;AAC7C,cAAM,oBAAoB,aAAa,SAAS;AAChD,cAAM,gBAAgB,WAAW,iBAAiB;AAClD,cAAM,eAAe,QAAQ,YAAY;AAEzC,cAAM,MAAM,UACR,MAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,IACvC,SAAS,oBAAI,KAAK,GAAG,GAAG;AAC5B,cAAM,MAAM,UACR,MAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,IACvC,oBAAI,KAAK;AAEb,cAAM,WAAW,MAAM;AAAA,UACrB,EAAE,QAAQ,IAAI;AAAA,UACd,CAAC,GAAG,MAAM,UAAU;AAAA,QACtB,EAAE,OAAO,CAAC,MAAM,KAAK,QAAQ,GAAG,KAAK,KAAK,QAAQ,GAAG,CAAC;AAEtD,cAAM,YAAY;AAAA,UAChB,IAAI,KAAK,cAAc,iBAAiB;AAAA,QAC1C;AACA,cAAM,YAAY,MAAM;AAAA,UAAK,EAAE,QAAQ,UAAU;AAAA,UAAG,CAAC,GAAG,MACtD,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,QAC5B;AAEA,eAAO,WAAW;AAClB,iBAAS,aAAa;AACtB,gBAAQ,YAAY;AACpB,iBAAS,QAAQ;AACjB,gBAAQ,SAAS;AACjB,gBAAQ,OAAO,cAAc,IAAI,CAAC;AAClC,kBAAU,OAAO,cAAc,IAAI,CAAC;AACpC,wBAAgB,IAAI;AAEpB,mBAAW,MAAM,eAAe,SAAS,QAAQ,GAAG,EAAE;AAAA,MACxD;AAAA,MACA,CAAC,SAAS,SAAS,UAAU;AAAA,IAC/B;AAEA,wBAAoB,KAAK,OAAO,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;AAEjD,UAAM,gBAAgB,MAAM;AAC1B,YAAM,aAAa,WAAW,UAAU,CAAC,MAAM,MAAM,KAAK;AAC1D,YAAM,eAAe,GAAG,IAAI,KAAK,aAAa,GAC3C,SAAS,EACT,SAAS,GAAG,GAAG,CAAC,IAAI,GAAG;AAE1B,YAAM,YAAY,iBACd;AAAA,QACE,GAAG,YAAY,IAAI,IAAI,IAAI,MAAM;AAAA,QACjC;AAAA,QACA,oBAAI,KAAK;AAAA,MACX,IACA,MAAM,cAAc,cAAc,oBAAI,KAAK,CAAC;AAEhD,YAAM,cAAc,UAChB,WAAW,MAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,CAAC,IACnD;AACJ,YAAM,cAAc,UAChB,WAAW,MAAM,SAAS,cAAc,oBAAI,KAAK,CAAC,CAAC,IACnD;AAEJ,UACG,eAAe,SAAS,WAAW,SAAS,GAAG,WAAW,KAC1D,eAAe,QAAQ,WAAW,SAAS,GAAG,WAAW,GAC1D;AACA;AAAA,MACF;AAEA,YAAM,qBAAqB,WAAW,UAAU,CAAC,MAAM,MAAM,KAAK;AAClE,YAAM,gBAAgB,iBAClB,GAAG,GAAG,IAAI,YAAY,kBAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,MAAM,KACnE,GAAG,GAAG,IAAI,WAAW,kBAAkB,CAAC,IAAI,IAAI;AAEpD,eAAS,aAAa;AACtB,qBAAe,SAAS,MAAM;AAAA,IAChC;AAEA,UAAM,oBAAoB,CAAC,QAAgB;AACzC,YAAM,YAAY,iBACb,WAAW,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,KAAK,MAC9C;AACJ,YAAM,oBAAoB,WAAW,UAAU,CAAC,MAAM,MAAM,SAAS;AACrE,YAAM,YAAY,eAAe,IAAI,KAAK,MAAM,iBAAiB,CAAC;AAClE,YAAM,UAAU,MAAM;AAAA,QAAK,EAAE,QAAQ,UAAU;AAAA,QAAG,CAAC,GAAG,MACpD,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,MAC5B;AACA,eAAS,SAAS;AAClB,cAAQ,OAAO;AAAA,IACjB;AAEA,UAAM,mBAAmB,CAAC,QAAgB;AACxC,YAAM,iBAAiB,WAAW,UAAU,CAAC,MAAM,MAAM,KAAK;AAC9D,YAAM,YAAY,eAAe,IAAI,KAAK,KAAK,cAAc,CAAC;AAC9D,YAAM,UAAU,MAAM;AAAA,QAAK,EAAE,QAAQ,UAAU;AAAA,QAAG,CAAC,GAAG,MACpD,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,MAC5B;AACA,cAAQ,GAAG;AACX,cAAQ,OAAO;AAAA,IACjB;AAEA,UAAM,yBAAyB,KAAK,UAAU,CAAC,QAAQ,QAAQ,GAAG;AAClE,UAAM,2BAA2B,cAAc;AAAA,MAAU,CAAC,QACxD,iBAAiB,MAAM,WAAW,GAAG,IAAI,QAAQ;AAAA,IACnD;AACA,UAAM,0BAA0B,MAAM,UAAU,CAAC,QAAQ,QAAQ,IAAI;AACrE,UAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,GAAG,CAAC;AAC1E,UAAM,UAAU,MAAM;AAAA,MAAK,EAAE,QAAQ,GAAG;AAAA,MAAG,CAAC,GAAG,MAC7C,GAAG,CAAC,GAAG,SAAS,GAAG,GAAG;AAAA,IACxB;AAEA,UAAM,YAAY,QAAQ,MAAM;AAC9B,UAAI,OAAO;AACT,eAAO;AAAA,MACT;AACA,aAAO,eAAe;AAAA,IACxB,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,UAAM,eAAe,CAAC,MAA0B;AAC9C,gBAAU,GAAG,aAAa,QAAQ,UAAU,GAAG;AAAA,IACjD;AAEA,WACE,0DACE,oCAAC,QAAK,OAAO,OAAO,aACjB,SAAS,oCAAC,QAAK,OAAO,CAAC,OAAO,OAAO,UAAU,KAAI,KAAM,GACzD,WACC,oCAAC,QAAK,OAAO,CAAC,OAAO,SAAS,YAAY,KAAI,OAAQ,GAExD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,CAAC,OAAO,OAAO,UAAU,OAAO,YAAY,UAAU;AAAA,QAC7D,SAAS,MAAM,KAAK,KAAK;AAAA;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,CAAC,SAAS,OAAO;AAAA,YACjB;AAAA,UACF;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IACF,GACC,UAAU,OAAO,SAAS,KACzB,oCAAC,QAAK,OAAO,CAAC,OAAO,WAAW,UAAU,KAAI,OAAO,CAAC,CAAE,CAE5D,GAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,YAAY,CAAC,KAAK;AAAA,QAClB,iBAAiB,EAAE,iBAAiB,OAAO;AAAA,QAC3C,qBAAqB;AAAA,QACrB,mBAAmB,CAAC,UAClB;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,mBAAmB;AAAA,YACnB,gBAAgB;AAAA;AAAA,QAClB;AAAA,QAEF,6BAA6B;AAAA,QAC7B,4BAA4B;AAAA,QAC5B,sBAAsB;AAAA;AAAA,MAErB,gBACC,oCAAC,QAAK,OAAO,OAAO,gBAClB,oCAAC,YACC,oCAAC,QAAK,OAAO,OAAO,cAAY,gBACjB,iBAAiB,WAAW,EAC3C,CACF,GACA,oCAAC,QAAK,OAAO,OAAO,iBAAiB,UAAU,gBAE7C;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,YAAY,CAAC,SACX;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,MAAM,OAAO,iBAAiB,OAAO;AAAA;AAAA,YAG/C;AAAA,UACH;AAAA,UAEF,eAAe,CAACA,WAAU,OAAOA,MAAe;AAAA,UAChD,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,YAAY,CAAC,SACX;AAAA,YAAC;AAAA;AAAA,cACC,OACE,UAAU,iBAAiB,MAAM,MAAM,GAAG,CAAC,IAAI,SAC3C,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACA,WAAU,kBAAkBA,MAAe;AAAA,UAC3D,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,YAAY,CAAC,SACX;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,OACL,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACA,WAAU,iBAAiBA,MAAe;AAAA,UAC1D,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GACC,kBACC,0DACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe,MAAM,UAAU,CAAC,QAAQ,QAAQ,IAAI;AAAA,UACpD,YAAY,CAAC,SACX;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,OACL,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACA,WAAU,QAAQA,MAAe;AAAA,UACjD,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,GACA;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe,QAAQ,UAAU,CAAC,QAAQ,QAAQ,MAAM;AAAA,UACxD,YAAY,CAAC,SACX;AAAA,YAAC;AAAA;AAAA,cACC,OACE,SAAS,SACL,OAAO,iBACP,OAAO;AAAA;AAAA,YAGZ;AAAA,UACH;AAAA,UAEF,eAAe,CAACA,WAAU,UAAUA,MAAe;AAAA,UACnD,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,sBAAsB;AAAA,UACtB;AAAA,UACA,mBAAkB;AAAA;AAAA,MACpB,CACF,CAEJ,GACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP;AAAA,cACE,eAAe,SAAS,OAAO,QAAQ,gBAAgB;AAAA,YACzD;AAAA,UACF;AAAA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,eAAe,SAAS,MAAM;AAAA,YAC7C,SAAO;AAAA,YACP,OAAO;AAAA,YACP,WAAW;AAAA;AAAA,UACZ;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA;AAAA,UACZ;AAAA,QAED;AAAA,MACF,CACF;AAAA,IAEJ,CACF;AAAA,EAEJ;AACF;AAEA,IAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,EACP;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,kBAAkB;AAAA,IAClB,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,EACT;AACF,CAAC;AAED,IAAO,qBAAQ;","names":["value"]}
1
+ {"version":3,"sources":["../src/DatePicker.tsx"],"sourcesContent":["import React, {\n useState,\n useImperativeHandle,\n forwardRef,\n useCallback,\n useRef,\n useMemo,\n} from \"react\";\nimport {\n View,\n TouchableOpacity,\n Platform,\n LayoutChangeEvent,\n Text,\n StyleSheet,\n ViewStyle,\n TextStyle,\n} from \"react-native\";\nimport {\n format,\n parse,\n getDaysInMonth,\n subYears,\n isBefore,\n isAfter,\n getYear,\n startOfDay,\n} from \"date-fns\";\nimport ScrollPicker from \"react-native-wheel-scrollview-picker\";\nimport { BottomSheetModal, BottomSheetBackdrop } from \"@gorhom/bottom-sheet\";\n\nexport interface DatePickerRef {\n show: (initialDate?: string) => void;\n}\n\nexport interface DatePickerProps {\n value?: string;\n label?: string;\n placeholder?: string;\n onChange: (date: string) => void;\n minDate?: string;\n maxDate?: string;\n showTimePicker?: boolean;\n dateFormat?: string; // Custom format (e.g., \"yyyy-MM-dd\", \"dd/MM/yyyy\", \"MMM dd, yyyy\")\n subText?: string | React.ReactNode;\n errors?: string[];\n // Styling props\n inputStyle?: ViewStyle;\n inputTextStyle?: TextStyle;\n labelStyle?: TextStyle;\n errorStyle?: TextStyle;\n subTextStyle?: TextStyle;\n highlightColor?: string;\n buttonStyle?: ViewStyle;\n buttonTextStyle?: TextStyle;\n cancelButtonStyle?: ViewStyle;\n cancelButtonTextStyle?: TextStyle;\n}\n\nconst InternalButton: React.FC<{\n onPress: () => void;\n children: string;\n outline?: boolean;\n style?: ViewStyle;\n textStyle?: TextStyle;\n}> = ({ onPress, children, outline, style, textStyle }) => {\n return (\n <TouchableOpacity\n onPress={onPress}\n style={[styles.button, outline && styles.buttonOutline, style]}\n >\n <Text\n style={[\n styles.buttonText,\n outline && styles.buttonTextOutline,\n textStyle,\n ]}\n >\n {children}\n </Text>\n </TouchableOpacity>\n );\n};\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (\n {\n value,\n label,\n placeholder,\n onChange,\n minDate,\n maxDate,\n showTimePicker = false,\n dateFormat,\n subText,\n errors,\n inputStyle,\n inputTextStyle,\n labelStyle,\n errorStyle,\n subTextStyle,\n highlightColor = \"#E5E5E5\",\n buttonStyle,\n buttonTextStyle,\n cancelButtonStyle,\n cancelButtonTextStyle,\n },\n ref\n ) => {\n const nowYear = new Date().getFullYear();\n const bottomSheetRef = useRef<BottomSheetModal>(null);\n\n // Default formats if not provided\n const defaultFormat = useMemo(() => {\n if (dateFormat) return dateFormat;\n return showTimePicker ? \"dd MMM yyyy HH:mm\" : \"dd MMMM yyyy\";\n }, [dateFormat, showTimePicker]);\n\n const fullMonths = useMemo(\n () => [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n []\n );\n\n const shortMonths = useMemo(\n () => [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ],\n []\n );\n const [day, setDay] = useState(\"01\");\n const [month, setMonth] = useState(\"January\");\n const [year, setYear] = useState(nowYear);\n const [days, setDays] = useState<string[]>([]);\n const [years, setYears] = useState<number[]>([]);\n const [initComplete, setInitComplete] = useState(false);\n const [hour, setHour] = useState(\"00\");\n const [minute, setMinute] = useState(\"00\");\n const [height, setHeight] = useState(180);\n\n const displayMonths = showTimePicker ? shortMonths : fullMonths;\n\n const show = useCallback(\n (initialDate?: string) => {\n let selectedDate: Date;\n if (initialDate) {\n try {\n selectedDate = parse(initialDate, defaultFormat, new Date());\n // If parsing fails or returns invalid date, use current date\n if (!selectedDate || isNaN(selectedDate.getTime())) {\n selectedDate = new Date();\n }\n } catch {\n selectedDate = new Date();\n }\n } else {\n selectedDate = new Date();\n }\n\n const selectedDay = format(selectedDate, \"dd\");\n const currentMonthIndex = selectedDate.getMonth();\n const selectedMonth = fullMonths[currentMonthIndex];\n const selectedYear = getYear(selectedDate);\n\n const min = minDate\n ? parse(minDate, \"yyyy-MM-dd\", new Date())\n : subYears(new Date(), 200);\n const max = maxDate\n ? parse(maxDate, \"yyyy-MM-dd\", new Date())\n : new Date();\n\n const allYears = Array.from(\n { length: 200 },\n (_, i) => nowYear - i\n ).filter((y) => y >= getYear(min) && y <= getYear(max));\n\n const totalDays = getDaysInMonth(\n new Date(selectedYear, currentMonthIndex)\n );\n const daysArray = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n\n setDay(selectedDay);\n setMonth(selectedMonth);\n setYear(selectedYear);\n setYears(allYears);\n setDays(daysArray);\n setHour(format(selectedDate, \"HH\"));\n setMinute(format(selectedDate, \"mm\"));\n setInitComplete(true);\n\n setTimeout(() => bottomSheetRef.current?.present(), 10);\n },\n [minDate, maxDate, fullMonths, showTimePicker, defaultFormat]\n );\n\n useImperativeHandle(ref, () => ({ show }), [show]);\n\n const handleSetDate = () => {\n const monthIndex = fullMonths.findIndex((m) => m === month);\n const finalDateStr = `${year}-${(monthIndex + 1)\n .toString()\n .padStart(2, \"0\")}-${day}`;\n\n const finalDate = showTimePicker\n ? parse(\n `${finalDateStr} ${hour}:${minute}`,\n \"yyyy-MM-dd HH:mm\",\n new Date()\n )\n : parse(finalDateStr, \"yyyy-MM-dd\", new Date());\n\n const minDateTime = minDate\n ? startOfDay(parse(minDate, \"yyyy-MM-dd\", new Date()))\n : null;\n const maxDateTime = maxDate\n ? startOfDay(parse(maxDate, \"yyyy-MM-dd\", new Date()))\n : null;\n\n if (\n (minDateTime && isBefore(startOfDay(finalDate), minDateTime)) ||\n (maxDateTime && isAfter(startOfDay(finalDate), maxDateTime))\n ) {\n return;\n }\n\n // Format the date according to custom format or default\n const formattedDate = format(finalDate, defaultFormat);\n\n onChange(formattedDate);\n bottomSheetRef.current?.close();\n };\n\n const handleMonthChange = (val: string) => {\n const fullMonth = showTimePicker\n ? (fullMonths.find((m) => m.startsWith(val)) ?? val)\n : val;\n const changedMonthIndex = fullMonths.findIndex((m) => m === fullMonth);\n const totalDays = getDaysInMonth(new Date(year, changedMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setMonth(fullMonth);\n setDays(newDays);\n };\n\n const handleYearChange = (val: number) => {\n const yearMonthIndex = fullMonths.findIndex((m) => m === month);\n const totalDays = getDaysInMonth(new Date(val, yearMonthIndex));\n const newDays = Array.from({ length: totalDays }, (_, i) =>\n `${i + 1}`.padStart(2, \"0\")\n );\n setYear(val);\n setDays(newDays);\n };\n\n const findSelectedDayByIndex = days.findIndex((val) => val === day);\n const findSelectedMonthByIndex = displayMonths.findIndex((val) =>\n showTimePicker ? month.startsWith(val) : val === month\n );\n const findSelectedYearByIndex = years.findIndex((val) => val === year);\n const hours = Array.from({ length: 24 }, (_, i) => `${i}`.padStart(2, \"0\"));\n const minutes = Array.from({ length: 60 }, (_, i) =>\n `${i}`.padStart(2, \"0\")\n );\n\n const dateValue = useMemo(() => {\n if (value) {\n return value;\n }\n return placeholder || \"Select Date\";\n }, [value, placeholder]);\n\n const handleLayout = (e?: LayoutChangeEvent) => {\n setHeight(e?.nativeEvent?.layout?.height || 180);\n };\n\n return (\n <>\n <View style={styles.container}>\n {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}\n {subText && (\n <Text style={[styles.subText, subTextStyle]}>{subText}</Text>\n )}\n <TouchableOpacity\n style={[styles.input, errors && styles.inputError, inputStyle]}\n onPress={() => show(value)}\n >\n <Text\n style={[\n styles.inputText,\n !value && styles.inputTextPlaceholder,\n inputTextStyle,\n ]}\n >\n {dateValue}\n </Text>\n </TouchableOpacity>\n {errors && errors.length > 0 && (\n <Text style={[styles.errorText, errorStyle]}>{errors[0]}</Text>\n )}\n </View>\n\n <BottomSheetModal\n ref={bottomSheetRef}\n snapPoints={[\"50%\"]}\n backgroundStyle={{ backgroundColor: \"#fff\" }}\n enableDynamicSizing={false}\n backdropComponent={(props) => (\n <BottomSheetBackdrop\n {...props}\n disappearsOnIndex={-1}\n appearsOnIndex={0}\n />\n )}\n enableContentPanningGesture={false}\n enableHandlePanningGesture={false}\n enablePanDownToClose={false}\n >\n {initComplete && (\n <View style={styles.modalContent}>\n <View>\n <Text style={styles.modalTitle}>\n Select Date {showTimePicker ? \"& Time\" : \"\"}\n </Text>\n </View>\n <View style={styles.pickerContainer} onLayout={handleLayout}>\n {/* Day */}\n <ScrollPicker\n dataSource={days}\n selectedIndex={findSelectedDayByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === day ? styles.pickerItemBold : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setDay(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Month */}\n <ScrollPicker\n dataSource={displayMonths}\n selectedIndex={findSelectedMonthByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === (showTimePicker ? month.slice(0, 3) : month)\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleMonthChange(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {/* Year */}\n <ScrollPicker\n dataSource={years}\n selectedIndex={findSelectedYearByIndex}\n renderItem={(data) => (\n <Text\n style={\n data === year\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => handleYearChange(value as number)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n {showTimePicker && (\n <>\n <ScrollPicker\n dataSource={hours}\n selectedIndex={hours.findIndex((val) => val === hour)}\n renderItem={(data) => (\n <Text\n style={\n data === hour\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setHour(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n <ScrollPicker\n dataSource={minutes}\n selectedIndex={minutes.findIndex((val) => val === minute)}\n renderItem={(data) => (\n <Text\n style={\n data === minute\n ? styles.pickerItemBold\n : styles.pickerItem\n }\n >\n {data}\n </Text>\n )}\n onValueChange={(value) => setMinute(value as string)}\n wrapperHeight={height}\n itemHeight={40}\n highlightBorderWidth={0.5}\n highlightColor={highlightColor}\n wrapperBackground=\"#FFFFFF\"\n />\n </>\n )}\n </View>\n <View\n style={[\n styles.buttonContainer,\n {\n paddingBottom: Platform.OS === \"ios\" ? 20 : 20,\n },\n ]}\n >\n <InternalButton\n onPress={() => bottomSheetRef.current?.close()}\n outline\n style={cancelButtonStyle}\n textStyle={cancelButtonTextStyle}\n >\n Cancel\n </InternalButton>\n <InternalButton\n onPress={handleSetDate}\n style={buttonStyle}\n textStyle={buttonTextStyle}\n >\n Save\n </InternalButton>\n </View>\n </View>\n )}\n </BottomSheetModal>\n </>\n );\n }\n);\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: \"column\",\n gap: 8,\n },\n label: {\n fontSize: 14,\n color: \"#6B7280\",\n },\n subText: {\n fontSize: 14,\n color: \"#6B7280\",\n width: \"95%\",\n },\n input: {\n fontSize: 16,\n color: \"#000\",\n backgroundColor: \"#F3F4F6\",\n borderRadius: 16,\n padding: 14,\n shadowColor: \"#000\",\n shadowOffset: {\n width: 0,\n height: 2,\n },\n shadowOpacity: 0.1,\n shadowRadius: 3,\n elevation: 2,\n },\n inputError: {\n borderWidth: 1,\n borderColor: \"#EF4444\",\n },\n inputText: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n inputTextPlaceholder: {\n color: \"#9CA3AF\",\n },\n errorText: {\n fontSize: 12,\n color: \"#EF4444\",\n fontWeight: \"bold\",\n },\n modalContent: {\n flexDirection: \"column\",\n gap: 12,\n marginHorizontal: 24,\n flex: 1,\n },\n modalTitle: {\n fontSize: 20,\n fontWeight: \"bold\",\n color: \"#1F2937\",\n },\n pickerContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n paddingVertical: 16,\n flex: 1,\n },\n pickerItem: {\n fontSize: 16,\n color: \"#1F2937\",\n },\n pickerItemBold: {\n fontSize: 16,\n color: \"#1F2937\",\n fontWeight: \"bold\",\n },\n buttonContainer: {\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: 24,\n paddingVertical: 16,\n backgroundColor: \"#fff\",\n },\n button: {\n flex: 1,\n backgroundColor: \"#3B82F6\",\n borderRadius: 12,\n paddingVertical: 14,\n paddingHorizontal: 20,\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n buttonOutline: {\n backgroundColor: \"transparent\",\n borderWidth: 1,\n borderColor: \"#3B82F6\",\n },\n buttonText: {\n color: \"#fff\",\n fontSize: 16,\n fontWeight: \"600\",\n },\n buttonTextOutline: {\n color: \"#3B82F6\",\n },\n});\n\nexport default DatePicker;\n"],"mappings":"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","names":["value"]}
package/package.json CHANGED
@@ -3,15 +3,15 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "1.0.0",
6
+ "version": "1.0.2",
7
7
  "description": "A flexible and customizable React Native datepicker component with bottom sheet modal",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.mjs",
10
10
  "types": "dist/index.d.ts",
11
11
  "files": [
12
12
  "dist",
13
- "src",
14
- "README.md"
13
+ "README.md",
14
+ "LICENSE"
15
15
  ],
16
16
  "scripts": {
17
17
  "build": "tsup",
@@ -38,13 +38,15 @@
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": ">=16.8.0",
41
- "react-native": ">=0.60.0"
41
+ "react-native": ">=0.60.0",
42
+ "@gorhom/bottom-sheet": ">=4.0.0",
43
+ "react-native-gesture-handler": ">=2.0.0",
44
+ "react-native-reanimated": ">=2.0.0",
45
+ "react-native-safe-area-context": ">=4.0.0"
42
46
  },
43
47
  "dependencies": {
44
- "@gorhom/bottom-sheet": "^4.6.3",
45
48
  "classnames": "^2.5.1",
46
49
  "date-fns": "^3.3.1",
47
- "react-native-safe-area-context": "^4.10.0",
48
50
  "react-native-wheel-scrollview-picker": "^2.0.1"
49
51
  },
50
52
  "devDependencies": {
@@ -1,582 +0,0 @@
1
- import React, {
2
- useState,
3
- useImperativeHandle,
4
- forwardRef,
5
- useCallback,
6
- useRef,
7
- useMemo,
8
- } from "react";
9
- import {
10
- View,
11
- TouchableOpacity,
12
- Platform,
13
- LayoutChangeEvent,
14
- Text,
15
- StyleSheet,
16
- ViewStyle,
17
- TextStyle,
18
- } from "react-native";
19
- import {
20
- format,
21
- parse,
22
- getDaysInMonth,
23
- subYears,
24
- isBefore,
25
- isAfter,
26
- getYear,
27
- startOfDay,
28
- } from "date-fns";
29
- import ScrollPicker from "react-native-wheel-scrollview-picker";
30
- import { BottomSheetModal, BottomSheetBackdrop } from "@gorhom/bottom-sheet";
31
- import { useSafeAreaInsets } from "react-native-safe-area-context";
32
-
33
- export interface DatePickerRef {
34
- show: (initialDate?: string) => void;
35
- }
36
-
37
- export interface DatePickerProps {
38
- value?: string;
39
- label?: string;
40
- placeholder?: string;
41
- onChange: (date: string) => void;
42
- minDate?: string;
43
- maxDate?: string;
44
- showTimePicker?: boolean;
45
- subText?: string | React.ReactNode;
46
- errors?: string[];
47
- // Styling props
48
- inputStyle?: ViewStyle;
49
- inputTextStyle?: TextStyle;
50
- labelStyle?: TextStyle;
51
- errorStyle?: TextStyle;
52
- subTextStyle?: TextStyle;
53
- highlightColor?: string;
54
- buttonStyle?: ViewStyle;
55
- buttonTextStyle?: TextStyle;
56
- cancelButtonStyle?: ViewStyle;
57
- cancelButtonTextStyle?: TextStyle;
58
- }
59
-
60
- const InternalButton: React.FC<{
61
- onPress: () => void;
62
- children: string;
63
- outline?: boolean;
64
- style?: ViewStyle;
65
- textStyle?: TextStyle;
66
- }> = ({ onPress, children, outline, style, textStyle }) => {
67
- return (
68
- <TouchableOpacity
69
- onPress={onPress}
70
- style={[styles.button, outline && styles.buttonOutline, style]}
71
- >
72
- <Text
73
- style={[
74
- styles.buttonText,
75
- outline && styles.buttonTextOutline,
76
- textStyle,
77
- ]}
78
- >
79
- {children}
80
- </Text>
81
- </TouchableOpacity>
82
- );
83
- };
84
-
85
- const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
86
- (
87
- {
88
- value,
89
- label,
90
- placeholder,
91
- onChange,
92
- minDate,
93
- maxDate,
94
- showTimePicker = false,
95
- subText,
96
- errors,
97
- inputStyle,
98
- inputTextStyle,
99
- labelStyle,
100
- errorStyle,
101
- subTextStyle,
102
- highlightColor = "#E5E5E5",
103
- buttonStyle,
104
- buttonTextStyle,
105
- cancelButtonStyle,
106
- cancelButtonTextStyle,
107
- },
108
- ref
109
- ) => {
110
- const nowYear = new Date().getFullYear();
111
- const bottomSheetRef = useRef<BottomSheetModal>(null);
112
- const { bottom: paddingBottom } = useSafeAreaInsets();
113
-
114
- const fullMonths = useMemo(
115
- () => [
116
- "January",
117
- "February",
118
- "March",
119
- "April",
120
- "May",
121
- "June",
122
- "July",
123
- "August",
124
- "September",
125
- "October",
126
- "November",
127
- "December",
128
- ],
129
- []
130
- );
131
-
132
- const shortMonths = useMemo(
133
- () => [
134
- "Jan",
135
- "Feb",
136
- "Mar",
137
- "Apr",
138
- "May",
139
- "Jun",
140
- "Jul",
141
- "Aug",
142
- "Sep",
143
- "Oct",
144
- "Nov",
145
- "Dec",
146
- ],
147
- []
148
- );
149
- const [day, setDay] = useState("01");
150
- const [month, setMonth] = useState("January");
151
- const [year, setYear] = useState(nowYear);
152
- const [days, setDays] = useState<string[]>([]);
153
- const [years, setYears] = useState<number[]>([]);
154
- const [initComplete, setInitComplete] = useState(false);
155
- const [hour, setHour] = useState("00");
156
- const [minute, setMinute] = useState("00");
157
- const [height, setHeight] = useState(180);
158
-
159
- const displayMonths = showTimePicker ? shortMonths : fullMonths;
160
-
161
- const show = useCallback(
162
- (initialDate?: string) => {
163
- const selectedDate = initialDate
164
- ? parse(initialDate, "yyyy-MM-dd", new Date())
165
- : new Date();
166
- const selectedDay = format(selectedDate, "dd");
167
- const currentMonthIndex = selectedDate.getMonth();
168
- const selectedMonth = fullMonths[currentMonthIndex];
169
- const selectedYear = getYear(selectedDate);
170
-
171
- const min = minDate
172
- ? parse(minDate, "yyyy-MM-dd", new Date())
173
- : subYears(new Date(), 200);
174
- const max = maxDate
175
- ? parse(maxDate, "yyyy-MM-dd", new Date())
176
- : new Date();
177
-
178
- const allYears = Array.from(
179
- { length: 200 },
180
- (_, i) => nowYear - i
181
- ).filter((y) => y >= getYear(min) && y <= getYear(max));
182
-
183
- const totalDays = getDaysInMonth(
184
- new Date(selectedYear, currentMonthIndex)
185
- );
186
- const daysArray = Array.from({ length: totalDays }, (_, i) =>
187
- `${i + 1}`.padStart(2, "0")
188
- );
189
-
190
- setDay(selectedDay);
191
- setMonth(selectedMonth);
192
- setYear(selectedYear);
193
- setYears(allYears);
194
- setDays(daysArray);
195
- setHour(format(selectedDate, "HH"));
196
- setMinute(format(selectedDate, "mm"));
197
- setInitComplete(true);
198
-
199
- setTimeout(() => bottomSheetRef.current?.present(), 10);
200
- },
201
- [minDate, maxDate, fullMonths]
202
- );
203
-
204
- useImperativeHandle(ref, () => ({ show }), [show]);
205
-
206
- const handleSetDate = () => {
207
- const monthIndex = fullMonths.findIndex((m) => m === month);
208
- const finalDateStr = `${year}-${(monthIndex + 1)
209
- .toString()
210
- .padStart(2, "0")}-${day}`;
211
-
212
- const finalDate = showTimePicker
213
- ? parse(
214
- `${finalDateStr} ${hour}:${minute}`,
215
- "yyyy-MM-dd HH:mm",
216
- new Date()
217
- )
218
- : parse(finalDateStr, "yyyy-MM-dd", new Date());
219
-
220
- const minDateTime = minDate
221
- ? startOfDay(parse(minDate, "yyyy-MM-dd", new Date()))
222
- : null;
223
- const maxDateTime = maxDate
224
- ? startOfDay(parse(maxDate, "yyyy-MM-dd", new Date()))
225
- : null;
226
-
227
- if (
228
- (minDateTime && isBefore(startOfDay(finalDate), minDateTime)) ||
229
- (maxDateTime && isAfter(startOfDay(finalDate), maxDateTime))
230
- ) {
231
- return;
232
- }
233
-
234
- const selectedMonthIndex = fullMonths.findIndex((m) => m === month);
235
- const formattedDate = showTimePicker
236
- ? `${day} ${shortMonths[selectedMonthIndex]} ${year} ${hour}:${minute}`
237
- : `${day} ${fullMonths[selectedMonthIndex]} ${year}`;
238
-
239
- onChange(formattedDate);
240
- bottomSheetRef.current?.close();
241
- };
242
-
243
- const handleMonthChange = (val: string) => {
244
- const fullMonth = showTimePicker
245
- ? (fullMonths.find((m) => m.startsWith(val)) ?? val)
246
- : val;
247
- const changedMonthIndex = fullMonths.findIndex((m) => m === fullMonth);
248
- const totalDays = getDaysInMonth(new Date(year, changedMonthIndex));
249
- const newDays = Array.from({ length: totalDays }, (_, i) =>
250
- `${i + 1}`.padStart(2, "0")
251
- );
252
- setMonth(fullMonth);
253
- setDays(newDays);
254
- };
255
-
256
- const handleYearChange = (val: number) => {
257
- const yearMonthIndex = fullMonths.findIndex((m) => m === month);
258
- const totalDays = getDaysInMonth(new Date(val, yearMonthIndex));
259
- const newDays = Array.from({ length: totalDays }, (_, i) =>
260
- `${i + 1}`.padStart(2, "0")
261
- );
262
- setYear(val);
263
- setDays(newDays);
264
- };
265
-
266
- const findSelectedDayByIndex = days.findIndex((val) => val === day);
267
- const findSelectedMonthByIndex = displayMonths.findIndex((val) =>
268
- showTimePicker ? month.startsWith(val) : val === month
269
- );
270
- const findSelectedYearByIndex = years.findIndex((val) => val === year);
271
- const hours = Array.from({ length: 24 }, (_, i) => `${i}`.padStart(2, "0"));
272
- const minutes = Array.from({ length: 60 }, (_, i) =>
273
- `${i}`.padStart(2, "0")
274
- );
275
-
276
- const dateValue = useMemo(() => {
277
- if (value) {
278
- return value;
279
- }
280
- return placeholder || "Select Date";
281
- }, [value, placeholder]);
282
-
283
- const handleLayout = (e?: LayoutChangeEvent) => {
284
- setHeight(e?.nativeEvent?.layout?.height || 180);
285
- };
286
-
287
- return (
288
- <>
289
- <View style={styles.container}>
290
- {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
291
- {subText && (
292
- <Text style={[styles.subText, subTextStyle]}>{subText}</Text>
293
- )}
294
- <TouchableOpacity
295
- style={[styles.input, errors && styles.inputError, inputStyle]}
296
- onPress={() => show(value)}
297
- >
298
- <Text
299
- style={[
300
- styles.inputText,
301
- !value && styles.inputTextPlaceholder,
302
- inputTextStyle,
303
- ]}
304
- >
305
- {dateValue}
306
- </Text>
307
- </TouchableOpacity>
308
- {errors && errors.length > 0 && (
309
- <Text style={[styles.errorText, errorStyle]}>{errors[0]}</Text>
310
- )}
311
- </View>
312
-
313
- <BottomSheetModal
314
- ref={bottomSheetRef}
315
- snapPoints={["50%"]}
316
- backgroundStyle={{ backgroundColor: "#fff" }}
317
- enableDynamicSizing={false}
318
- backdropComponent={(props) => (
319
- <BottomSheetBackdrop
320
- {...props}
321
- disappearsOnIndex={-1}
322
- appearsOnIndex={0}
323
- />
324
- )}
325
- enableContentPanningGesture={false}
326
- enableHandlePanningGesture={false}
327
- enablePanDownToClose={false}
328
- >
329
- {initComplete && (
330
- <View style={styles.modalContent}>
331
- <View>
332
- <Text style={styles.modalTitle}>
333
- Select Date {showTimePicker ? "& Time" : ""}
334
- </Text>
335
- </View>
336
- <View style={styles.pickerContainer} onLayout={handleLayout}>
337
- {/* Day */}
338
- <ScrollPicker
339
- dataSource={days}
340
- selectedIndex={findSelectedDayByIndex}
341
- renderItem={(data) => (
342
- <Text
343
- style={
344
- data === day ? styles.pickerItemBold : styles.pickerItem
345
- }
346
- >
347
- {data}
348
- </Text>
349
- )}
350
- onValueChange={(value) => setDay(value as string)}
351
- wrapperHeight={height}
352
- itemHeight={40}
353
- highlightBorderWidth={0.5}
354
- highlightColor={highlightColor}
355
- wrapperBackground="#FFFFFF"
356
- />
357
- {/* Month */}
358
- <ScrollPicker
359
- dataSource={displayMonths}
360
- selectedIndex={findSelectedMonthByIndex}
361
- renderItem={(data) => (
362
- <Text
363
- style={
364
- data === (showTimePicker ? month.slice(0, 3) : month)
365
- ? styles.pickerItemBold
366
- : styles.pickerItem
367
- }
368
- >
369
- {data}
370
- </Text>
371
- )}
372
- onValueChange={(value) => handleMonthChange(value as string)}
373
- wrapperHeight={height}
374
- itemHeight={40}
375
- highlightBorderWidth={0.5}
376
- highlightColor={highlightColor}
377
- wrapperBackground="#FFFFFF"
378
- />
379
- {/* Year */}
380
- <ScrollPicker
381
- dataSource={years}
382
- selectedIndex={findSelectedYearByIndex}
383
- renderItem={(data) => (
384
- <Text
385
- style={
386
- data === year
387
- ? styles.pickerItemBold
388
- : styles.pickerItem
389
- }
390
- >
391
- {data}
392
- </Text>
393
- )}
394
- onValueChange={(value) => handleYearChange(value as number)}
395
- wrapperHeight={height}
396
- itemHeight={40}
397
- highlightBorderWidth={0.5}
398
- highlightColor={highlightColor}
399
- wrapperBackground="#FFFFFF"
400
- />
401
- {showTimePicker && (
402
- <>
403
- <ScrollPicker
404
- dataSource={hours}
405
- selectedIndex={hours.findIndex((val) => val === hour)}
406
- renderItem={(data) => (
407
- <Text
408
- style={
409
- data === hour
410
- ? styles.pickerItemBold
411
- : styles.pickerItem
412
- }
413
- >
414
- {data}
415
- </Text>
416
- )}
417
- onValueChange={(value) => setHour(value as string)}
418
- wrapperHeight={height}
419
- itemHeight={40}
420
- highlightBorderWidth={0.5}
421
- highlightColor={highlightColor}
422
- wrapperBackground="#FFFFFF"
423
- />
424
- <ScrollPicker
425
- dataSource={minutes}
426
- selectedIndex={minutes.findIndex((val) => val === minute)}
427
- renderItem={(data) => (
428
- <Text
429
- style={
430
- data === minute
431
- ? styles.pickerItemBold
432
- : styles.pickerItem
433
- }
434
- >
435
- {data}
436
- </Text>
437
- )}
438
- onValueChange={(value) => setMinute(value as string)}
439
- wrapperHeight={height}
440
- itemHeight={40}
441
- highlightBorderWidth={0.5}
442
- highlightColor={highlightColor}
443
- wrapperBackground="#FFFFFF"
444
- />
445
- </>
446
- )}
447
- </View>
448
- <View
449
- style={[
450
- styles.buttonContainer,
451
- {
452
- paddingBottom: Platform.OS === "ios" ? paddingBottom : 20,
453
- },
454
- ]}
455
- >
456
- <InternalButton
457
- onPress={() => bottomSheetRef.current?.close()}
458
- outline
459
- style={cancelButtonStyle}
460
- textStyle={cancelButtonTextStyle}
461
- >
462
- Cancel
463
- </InternalButton>
464
- <InternalButton
465
- onPress={handleSetDate}
466
- style={buttonStyle}
467
- textStyle={buttonTextStyle}
468
- >
469
- Save
470
- </InternalButton>
471
- </View>
472
- </View>
473
- )}
474
- </BottomSheetModal>
475
- </>
476
- );
477
- }
478
- );
479
-
480
- const styles = StyleSheet.create({
481
- container: {
482
- flexDirection: "column",
483
- gap: 8,
484
- },
485
- label: {
486
- fontSize: 14,
487
- color: "#6B7280",
488
- },
489
- subText: {
490
- fontSize: 14,
491
- color: "#6B7280",
492
- width: "95%",
493
- },
494
- input: {
495
- fontSize: 16,
496
- color: "#000",
497
- backgroundColor: "#F3F4F6",
498
- borderRadius: 16,
499
- padding: 14,
500
- shadowColor: "#000",
501
- shadowOffset: {
502
- width: 0,
503
- height: 2,
504
- },
505
- shadowOpacity: 0.1,
506
- shadowRadius: 3,
507
- elevation: 2,
508
- },
509
- inputError: {
510
- borderWidth: 1,
511
- borderColor: "#EF4444",
512
- },
513
- inputText: {
514
- fontSize: 16,
515
- color: "#1F2937",
516
- },
517
- inputTextPlaceholder: {
518
- color: "#9CA3AF",
519
- },
520
- errorText: {
521
- fontSize: 12,
522
- color: "#EF4444",
523
- fontWeight: "bold",
524
- },
525
- modalContent: {
526
- flexDirection: "column",
527
- gap: 12,
528
- marginHorizontal: 24,
529
- flex: 1,
530
- },
531
- modalTitle: {
532
- fontSize: 20,
533
- fontWeight: "bold",
534
- color: "#1F2937",
535
- },
536
- pickerContainer: {
537
- flexDirection: "row",
538
- justifyContent: "space-between",
539
- paddingVertical: 16,
540
- flex: 1,
541
- },
542
- pickerItem: {
543
- fontSize: 16,
544
- color: "#1F2937",
545
- },
546
- pickerItemBold: {
547
- fontSize: 16,
548
- color: "#1F2937",
549
- fontWeight: "bold",
550
- },
551
- buttonContainer: {
552
- flexDirection: "row",
553
- justifyContent: "space-between",
554
- gap: 24,
555
- paddingVertical: 16,
556
- backgroundColor: "#fff",
557
- },
558
- button: {
559
- flex: 1,
560
- backgroundColor: "#3B82F6",
561
- borderRadius: 12,
562
- paddingVertical: 14,
563
- paddingHorizontal: 20,
564
- alignItems: "center",
565
- justifyContent: "center",
566
- },
567
- buttonOutline: {
568
- backgroundColor: "transparent",
569
- borderWidth: 1,
570
- borderColor: "#3B82F6",
571
- },
572
- buttonText: {
573
- color: "#fff",
574
- fontSize: 16,
575
- fontWeight: "600",
576
- },
577
- buttonTextOutline: {
578
- color: "#3B82F6",
579
- },
580
- });
581
-
582
- export default DatePicker;
package/src/index.tsx DELETED
@@ -1,2 +0,0 @@
1
- export { default as DatePicker } from "./DatePicker";
2
- export type { DatePickerRef, DatePickerProps } from "./DatePicker";