Added Date Picker

App.js

@@ -1 +1,46 @@
 export default from './storybook';
+
+// import React, {useState} from 'react';
+// import {
+//   StyleSheet,
+//   View,
+//   SafeAreaView,
+//   Text,
+//   Alert,
+//   onChangeText,
+//   Platform
+// } from 'react-native';
+// import {Base as Input} from './src';
+
+// const App = () => {
+//   const [date, setDate] = useState(new Date(1598051730000));
+//   const [mode, setMode] = useState('date');
+//   const [show, setShow] = useState(false);
+
+//   const onChange = (event, selectedDate) => {
+//     const currentDate = selectedDate || date;
+//     setShow(Platform.OS === 'ios');
+//     setDate(currentDate);
+//   };
+//   return (
+//     <View>
+//       <Input
+//         calendar="true"
+//         mode="date"
+//         label="Select Date"
+//         value={date}
+//         onChange={v => {
+//           onChange(v);
+//         }}
+//         labelTextColor="#3B82F6"
+//         maximumDate={new Date(2300, 10, 20)}
+//         minimumDate={new Date(1950, 0, 1)}
+//         placeholder="YYYY-MM-DD"
+//         icon={<Text>😊</Text>}
+//         iconPosition="right"
+//         edit={false}
+//       />
+//     </View>
+//   );
+// };
+// export default App;

package.json

@@ -67,5 +67,8 @@
   },
   "jest": {
     "preset": "react-native"
+  },
+  "dependencies": {
+    "@react-native-community/datetimepicker": "^5.0.1"
   }
 }

src/Base/Base.stories.js

@@ -47,4 +47,22 @@ storiesOf('Default', module)
       // borderColor="#FDBA74"
       // errorTextStyles={{color: '#FDBA74'}}
     />
+  ))
+  .add('Default Calendar Field', () => (
+    <Input
+      calendar="true"
+      mode="date"
+      label="Select Date"
+      value={''}
+      onChangeText={value => {
+        onChangeText(value)
+      }}
+      labelTextColor="#3B82F6"
+      maximumDate={new Date(2300, 10, 20)}
+      minimumDate={new Date(1950, 0, 1)}
+      placeholder="YYYY-MM-DD"
+      icon={<Text>😊</Text>}
+      iconPosition="right"
+      edit={false}
+    />
   ));

src/Base/index.js

@@ -1,23 +1,33 @@
 import {height} from 'dom-helpers';
-import React from 'react';
-import {Text, View, TextInput} from 'react-native';
+import React, {useState, useRef, useEffect} from 'react';
+import {Text, View, TextInput, Platform, Pressable, Button} from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
 
 const Input = ({
   onChangeText,
   iconPosition,
   icon,
   value,
   placeholder = 'Enter Text',
+  maximumDate = null,
+  minimumDate = null,
   label = null,
+  calendar = 'false',
+  autoFocus = false,
   error,
+  editable = true,
+  mode = 'date',
+  edit = false,
+  calenderWidth = '100%',
   ...props
 }) => {
+  const inputRef = useRef(null);
   const [focused, setFocused] = React.useState(false);
   const textInputStyles = {
     ...(props.textInputStyles || {
       flex: 1,
       width: '100%',
-      color: props.textColor || '#fff',
+      color: props.textColor || '#000',
       letterSpacing: 0,
     }),
   };
@@ -39,53 +49,133 @@ const Input = ({
     }
     return props.borderColor;
   };
+  const [event, setEvent] = useState(edit ? 'true' : 'false');
+
+  const [showDatePicker, setShowDatePicker] = useState('false');
+
+  const formatDate = value => {
+    var d = new Date(value.toString()),
+      month = '' + (d.getMonth() + 1),
+      day = '' + d.getDate(),
+      year = d.getFullYear();
+    if (month.length < 2) {
+      month = '0' + month;
+    }
+    if (day.length < 2) {
+      day = '0' + day;
+    }
+
+    return [year, month, day].join('-');
+  };
+
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
 
   return (
-    <>
+    <View>
       <View style={{...props.labelStyles}}>
         {label && (
           <Text style={{color: props.labelTextColor || '#000'}}>{label}</Text>
         )}
       </View>
-      <View
-        style={{
-          ...(props.wrapperStyles || {
-            height: props.height || 42,
-            borderWidth: props.borderWidth || 1,
-            borderRadius: props.borderRadius || 4,
-            paddingHorizontal: props.paddingHorizontal || 5,
-            marginTop: props.marginTop || 5,
-            alignItems: 'center',
-            borderColor: getBorderColor(),
-            flexDirection: getFlexDirection() || 'row',
-          }),
-        }}>
-        <View
-          style={{
-            alignItems: 'center',
-          }}>
-          {icon && icon}
-        </View>
+      {calendar === 'false' && (
+        <>
+          <View
+            style={{
+              ...(props.wrapperStyles || {
+                height: props.height || 42,
+                borderWidth: props.borderWidth || 1,
+                borderRadius: props.borderRadius || 4,
+                paddingHorizontal: props.paddingHorizontal || 5,
+                marginTop: props.marginTop || 5,
+                alignItems: 'center',
+                borderColor: getBorderColor(),
+                flexDirection: getFlexDirection() || 'row',
+              }),
+            }}>
+            <View
+              style={{
+                alignItems: 'center',
+              }}>
+              {icon && icon}
+            </View>
+            <View
+              style={{
+                height: props.height || 42,
+              }}>
+              <TextInput
+                ref={inputRef}
+                placeholder={placeholder}
+                style={textInputStyles}
+                color={props.color || '#000'}
+                onChangeText={onChangeText}
+                value={value}
+                onFocus={() => {
+                  setFocused(true);
+                }}
+                onBlur={() => {
+                  setFocused(false);
+                }}
+                {...props}
+              />
+            </View>
+          </View>
+        </>
+      )}
+      {calendar === 'true' && (
         <View
           style={{
-            height: props.height || 42,
+            ...(props.wrapperStyles || {
+              height: props.height || 42,
+              borderWidth: props.borderWidth || 1,
+              borderRadius: props.borderRadius || 4,
+              paddingHorizontal: props.paddingHorizontal || 5,
+              marginTop: props.marginTop || 5,
+              alignItems: 'center',
+              borderColor: getBorderColor(),
+              flexDirection: getFlexDirection() || 'row',
+            }),
           }}>
-          <TextInput
-            placeholder={placeholder}
-            style={textInputStyles}
-            color={props.color || '#000'}
-            onChangeText={onChangeText}
-            value={value}
-            onFocus={() => {
-              setFocused(true);
-            }}
-            onBlur={() => {
-              setFocused(false);
-            }}
-            {...props}
-          />
+          <View
+            style={{
+              alignItems: 'center',
+            }}>
+            {icon && icon}
+          </View>
+          {event === 'true' && (
+            <Pressable
+              style={{
+                flex: 1,
+                paddingTop: 4,
+                paddingBottom: 4,
+              }}
+              onPress={() => {
+                setShowDatePicker('true');
+              }}
+              value={value}
+            />
+          )}
+
+          {event === 'false' && (
+            <Pressable
+              style={{
+                flex: 1,
+                paddingTop: 4,
+                paddingBottom: 4,
+                opacity: 0.25,
+              }}
+              onPress={() => {
+                setShowDatePicker('true');
+              }}>
+              <Text>{placeholder}</Text>
+            </Pressable>
+          )}
         </View>
-      </View>
+      )}
+
       <View>
         {error && (
           <Text
@@ -100,7 +190,47 @@ const Input = ({
           </Text>
         )}
       </View>
-    </>
+      {showDatePicker === 'true' && (
+        <View>
+          <DateTimePicker
+            textColor="#000"
+            themeVariant="dark"
+            style={{
+              flex: 1,
+              width: calenderWidth,
+              marginTop: 10,
+              borderRadius: 4,
+            }}
+            display={Platform.OS === 'ios' ? 'inline' : 'default'}
+            value={
+              (value !== '' && value != null && !value) === true
+                ? new Date(Date.parse(value))
+                : new Date()
+            }
+            mode={mode}
+            dateFormat="shortdate"
+            is24Hour={true}
+            maximumDate={maximumDate}
+            minimumDate={minimumDate}
+            onChange={(event, selectedDate) => {
+              if (event.type === 'dismissed') {
+                setShowDatePicker('false');
+              } else {
+                setShowDatePicker('false');
+                if (mode === 'time') {
+                  onChangeText(
+                    `${selectedDate.getHours()}:${selectedDate.getMinutes()}`,
+                  );
+                } else {
+                  onChangeText(formatDate(selectedDate));
+                }
+                setEvent('true');
+              }
+            }}
+          />
+        </View>
+      )}
+    </View>
   );
 };
 

src/index.js

@@ -1,3 +1,2 @@
 import Base from './Base';
-
 export {Base};

yarn.lock

@@ -1632,6 +1632,13 @@
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
 
+"@react-native-community/datetimepicker@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-5.0.1.tgz#1113f4c999dff6fda3cb5926e53f5f9c22e42e62"
+  integrity sha512-yDQbGZbP7SiOLkB2j1F0i9sQvVMo/cv4BB3DnbzPzWWYOH6xSPL1D9hi3YY9UUaJKQnLNgXBRMUEAJkmMy8NTw==
+  dependencies:
+    invariant "^2.2.4"
+
 "@react-native-community/eslint-config@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-2.0.0.tgz#35dcc529a274803fc4e0a6b3d6c274551fb91774"