Date picker at pluviometer sharing data screen

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { StyleSheet, Text, View, Image } from "react-native";
+import { StyleSheet, Text, View, Image, Button, TouchableHighlight, Platform } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -14,6 +14,12 @@ import DatePicker from "react-native-datepicker";
 import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
+import RNDateTimePicker from '@react-native-community/datetimepicker';
+import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { FontAwesome5 } from '@expo/vector-icons';
+
+import moment from 'moment';
 
 const validationSchema = Yup.object().shape({
   pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
@@ -23,14 +29,47 @@ const validationSchema = Yup.object().shape({
 function PluviometerSharingDataScreen(props) {
   const location = useLocation();
 
-  var day = new Date().getDate();
-  var month = new Date().getMonth() + 1;
-  var year = new Date().getFullYear();
+  /*-------------------------------------------DATETIMEPICKER------------------------------------------------*/
+
+  const { textStyle, defaultDate } = props;
+  const [date, setDate] = useState(moment(defaultDate))
+  const [show, setShow] = useState(false);
+
+  const onAndroidChange = (e, selectedDate) => {
+    setShow(false);
+    if (selectedDate) {
+      setDate(moment(selectedDate));
+      //props.onDateChange(selectedDate);
+    }
+  }
+
+  const onCancelPress = () => {
+    setDate(moment(defaultDate));
+    setShow(false);
+  }
+
+  const onDonePress = () => {
+    // props.onDateChange(date);
+    setShow(false);
+  }
 
-  var currentDate = day + "/" + month + "/" + year;
+  const renderDatePicker = () => {
+    return (
+      <DateTimePicker
+        timeZoneOffsetInMinutes={0}
+        value={new Date(date)}
+        mode="date"
+        maximumDate={new Date()}
+        onChange={onAndroidChange}
+      />
+    )
+  }
 
-  const [date, setDate] = useState(currentDate);
+  /*---------------------------------------------------------------------------------------------------------*/
 
+  // var day = new Date().getDate();
+  // var month = new Date().getMonth() + 1;
+  // var year = new Date().getFullYear();
   return (
     <Screen style={styles.container}>
       <View style={{ alignSelf: "center" }}>
@@ -55,15 +94,7 @@ function PluviometerSharingDataScreen(props) {
         validationSchema={validationSchema}
       >
         <View style={{ marginTop: 30 }}>
-          <Text
-            style={{
-              fontSize: 16,
-              fontWeight: "bold",
-              textAlign: "left",
-              color: "#1976D2",
-              marginTop: 10,
-            }}
-          >
+          <Text style={styles.labelStyle}>
             Quantidade de chuva:
           </Text>
           <FormField
@@ -76,51 +107,25 @@ function PluviometerSharingDataScreen(props) {
         </View>
 
         <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
-          <Text
-            style={{
-              fontSize: 16,
-              fontWeight: "bold",
-              textAlign: "left",
-              color: "#1976D2",
-              marginBottom: 5,
-            }}
-          >
+          <Text style={styles.labelStyle}>
             Data da coleta:
           </Text>
-          <DatePicker
-            style={styles.datePickerStyle}
-            date={date}
-            mode="date" // The enum of date, datetime and time
-            placeholder="Selecione a data da coleta"
-            format="DD/MM/YYYY"
-            minDate="01/01/2020"
-            maxDate={currentDate}
-            confirmBtnText="Confirmar"
-            cancelBtnText="Cancelar"
-            customStyles={{
-              dateIcon: {
-                //display: 'none',
-                position: "absolute",
-                left: 0,
-                top: 4,
-                marginLeft: 0,
-              },
-              dateInput: {
-                marginLeft: 36,
-                borderRadius: 18,
-              },
-            }}
-            onDateChange={(date) => {
-              setDate(date);
-            }}
-          />
+          <TouchableOpacity style={styles.datepickerStyle}
+            onPress={() => setShow(true)}>
+            <View style={styles.datePickerView}>
+              <Text style={{ fontSize: 16, marginLeft:15}}>
+                {date.format('DD/MM/YYYY')}
+              </Text>
+              <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey"/>
+              {show && renderDatePicker()}
+            </View>
+          </TouchableOpacity>
         </View>
         <FormImagePicker
           backgroundColor="#1976D2"
           name="images"
           styles={{ width: 50 }}
         />
-
         <SubmitButton title="Enviar" />
       </Form>
     </Screen>
@@ -137,8 +142,26 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  datePickerStyle: {
-    width: 180,
+  datePickerView: {
+    width: 280,
+    flexDirection: "row", 
+    justifyContent:"space-between",
+    paddingVertical:15,
+  },
+  datepickerStyle: {
+    borderRadius: 25,
+    width: 280,
+    backgroundColor: "#f8f4f4",
+  },
+  dateIcon: {
+    marginRight:15, 
+  },
+  labelStyle:{
+      fontSize: 16,
+      fontWeight: "bold",
+      textAlign: "left",
+      color: "#1976D2",
+      marginBottom: 5,
   },
 });