added date picker to create a time ticket screen

components/time-ticket/screen-time-ticket-create.component.jsx

@@ -1,5 +1,5 @@
 import { Formik } from "formik";
-import React from "react";
+import React, { useState } from "react";
 import { StyleSheet, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 import { View, ScrollView } from "react-native";
@@ -10,7 +10,7 @@ import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
 //import SelectDropdown from 'react-native-select-dropdown';
 import { SelectCostCenter } from "../Selects/select-cost-center";
 import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
-//import {DateTimePicker} from "expo";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
 
 //TODO add props needed for call
 const mapStateToProps = createStructuredSelector({
@@ -18,6 +18,21 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function TimeTicketCreate() {
+  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+  const [date2, setDate2] = useState(new Date());
+
+  const showDatePicker = () => {
+    setDatePickerVisibility(true);
+  };
+  const hideDatePicker = () => {
+    setDatePickerVisibility(false);
+  };
+  const handleConfirm = (date) => {
+    setDate2(date);
+    //console.warn("A date has been picked: ", date);
+    hideDatePicker();
+  };
+
   const { t } = useTranslation();
 
   const formSubmit = (values) => {
@@ -27,91 +42,98 @@ export function TimeTicketCreate() {
 
   return (
     <View style={localStyles.content}>
-        <ScrollView>
-      <Formik
-       
-        initialValues={{
-          jobid: "",
-          ticketdate: "",
-          employee: "",
-          costcenter: "",
-          productivehours: "",
-          actualhours: "",
-        }}
-        onSubmit={formSubmit}
-      >
-        {({ handleChange, handleBlur, handleSubmit, values }) => (
-          <View style={localStyles.topTimeTicketContainer}>
-            
-            {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
-            <TextInput
-              style={localStyles.input}
-              onChangeText={handleChange("jobid")}
-              mode="flat"
-              onBlur={handleBlur("jobid")}
-              value={values.jobid}
-              label={"Job to Post Against"}
-            />
-            
-            {/* Below will be replaced with a Date Picker*/}
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("ticketdate")}
-              onBlur={handleBlur("ticketdate")}
-              value={values.ticketdate}
-              label={"Ticket Date"}
-            />
-            {/* Below will set to auto fill with current employee */}
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("employee")}
-              onBlur={handleBlur("employee")}
-              value={values.employee}
-              label={"Employee"}
-            />
-            <SelectCostCenter />
-            {/* Below will be replaced with SelectCostCenter */}
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("costcenter")}
-              onBlur={handleBlur("costcenter")}
-              value={values.costcenter}
-              label={"Cost Center"}
-            />
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("productivehours")}
-              onBlur={handleBlur("productivehours")}
-              value={values.productivehours}
-              label={"Productive Hours"}
-            />
-            <TextInput
-              style={localStyles.input}
-              mode="flat"
-              onChangeText={handleChange("actualhours")}
-              onBlur={handleBlur("actualhours")}
-              value={values.actualhours}
-              label={"Actual Hours"}
-            />
-            <Button
-              style={localStyles.input}
-              onPress={handleSubmit}
-              title="Submit"
-            >
-              <Text style={{ fontSize: 12 }}>Save</Text>
-            </Button>
-          </View>
-        )}
-      </Formik>
-      
-      {/* Below is for list of jobs/tickets */}
-      <View style={localStyles.bottomTimeTicketContainer}>
-      
-      </View>
+      <ScrollView>
+        <Formik
+          initialValues={{
+            jobid: "",
+            ticketdate: date2.toLocaleDateString(),
+            employee: "",
+            costcenter: "",
+            productivehours: "",
+            actualhours: "",
+          }}
+          onSubmit={formSubmit}
+        >
+          {({ handleChange, handleBlur, handleSubmit, values }) => (
+            <View style={localStyles.topTimeTicketContainer}>
+              {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
+              <TextInput
+                style={localStyles.input}
+                onChangeText={handleChange("jobid")}
+                mode="flat"
+                onBlur={handleBlur("jobid")}
+                value={values.jobid}
+                label={"Job to Post Against"}
+              />
+
+              {/* Below will be replaced with a Date Picker*/}
+              {/* <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("ticketdate")}
+                onBlur={handleBlur("ticketdate")}
+                value={values.ticketdate}
+                label={"Ticket Date"}
+              /> */}
+              <Button title="TicketDatePickerButton" onPress={showDatePicker}>
+                Ticket Date: {date2.toLocaleDateString()}
+              </Button>
+              <DateTimePickerModal
+                isVisible={isDatePickerVisible}
+                mode="date"
+                date={date2}
+                onConfirm={handleConfirm}
+                onCancel={hideDatePicker}
+              />
+              {/* Below will set to auto fill with current employee */}
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("employee")}
+                onBlur={handleBlur("employee")}
+                value={values.employee}
+                label={"Employee"}
+              />
+
+              <SelectCostCenter />
+              {/* Below will be replaced with SelectCostCenter */}
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("costcenter")}
+                onBlur={handleBlur("costcenter")}
+                value={values.costcenter}
+                label={"Cost Center"}
+              />
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("productivehours")}
+                onBlur={handleBlur("productivehours")}
+                value={values.productivehours}
+                label={"Productive Hours"}
+              />
+              <TextInput
+                style={localStyles.input}
+                mode="flat"
+                onChangeText={handleChange("actualhours")}
+                onBlur={handleBlur("actualhours")}
+                value={values.actualhours}
+                label={"Actual Hours"}
+              />
+              <Button
+                style={localStyles.input}
+                onPress={handleSubmit}
+                title="Submit"
+              >
+                <Text style={{ fontSize: 12 }}>Save</Text>
+              </Button>
+            </View>
+          )}
+        </Formik>
+
+        {/* Below is for list of jobs/tickets */}
+        <View style={localStyles.bottomTimeTicketContainer}></View>
       </ScrollView>
     </View>
   );
@@ -122,12 +144,9 @@ export default connect(null, null)(TimeTicketCreate);
 const localStyles = StyleSheet.create({
   content: {
     display: "flex",
-    flex: 1
-  },
-  topTimeTicketContainer: {
-  },
-  bottomTimeTicketContainer: {
-  },
-  input: {
+    flex: 1,
   },
+  topTimeTicketContainer: {},
+  bottomTimeTicketContainer: {},
+  input: {},
 });