Home screen enhance

src/components/OOO/OOOForm.tsx

@@ -1,30 +1,36 @@
-import { StyleSheet, TextInput, View, Button } from 'react-native';
-import React from 'react';
+import { StyleSheet, TextInput, View, Button} from 'react-native';
+import React, {useState} from 'react';
 import { OOOFormType } from './OOOFormType';
+import DatePicker from './OOOFormDatePicker';
 
 const OOOForm = ({
   fromDate,
   toDate,
   description,
   setToDate,
   setFromDate,
   setDescription,
   handleFormSubmit,
 }: OOOFormType) => {
+  // const [selectedDate, setSelectedDate] = useState(new Date());
+  // const handleDateChange = (event, date) => {
+  //   if (date !== undefined) {
+  //     setSelectedDate(date);
+  //   }
+  // };
+
+
   return (
     <View style={styles.formContainer}>
-      <TextInput
-        style={styles.input}
-        placeholder="From Date"
-        value={fromDate}
-        onChangeText={setFromDate}
-      />
-      <TextInput
+      <DatePicker name='From date' />
+      <DatePicker name='To date'/>
+
+      {/* <TextInput
         style={styles.input}
         placeholder="To Date"
         value={toDate}
         onChangeText={setToDate}
-      />
+      /> */}
       <TextInput
         style={[styles.input, styles.textArea]}
         placeholder="Description"
@@ -56,6 +62,7 @@
     borderWidth: 1,
     borderRadius: 4,
     marginBottom: 10,
+    marginTop:20,
     paddingHorizontal: 10,
   },
   textArea: {

src/components/OOO/OOOFormDatePicker.tsx

@@ -0,0 +1,61 @@
+import React, { useState,prop } from 'react';
+import { Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import DatePicker from 'react-native-date-picker';
+
+type CatProps = {
+    name: string;
+  };
+
+const DeadLineDatePicker = (props : CatProps) => {
+  const [date, setDate] = useState(new Date());
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ScrollView>
+      <TouchableOpacity
+        style={styles.buttonStyle}
+        onPress={() => setOpen(true)}
+      >
+        <Text style={styles.buttonTextStyle}>{props.name}</Text>
+      </TouchableOpacity>
+      <DatePicker
+        modal
+        mode="date"
+        open={open}
+        date={date}
+        onConfirm={() => {
+          setOpen(false);
+          setDate(date);
+        }}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonStyle: {
+    width: '100%',
+    height: 50,
+    elevation: 5,
+    borderRadius: 10,
+    borderWidth: 1,
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    marginTop: 10,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: 15,
+    paddingRight: 15,
+  },
+  buttonTextStyle: {
+    fontWeight: '600',
+    color: 'black',
+    justifyContent: 'center',
+  },
+});
+
+export default DeadLineDatePicker;