Fixing date picker and making it work to get only the date by omitting the time hook

src/app/components/DatePicker.js

@@ -48,9 +48,11 @@ export default function DatePicker(props) {
     if (selectedDate) {
       if (mode == "date") {
         setDate(moment(selectedDate));
-        props.onDateChange(date);
+        props.onDateChange(moment(selectedDate));
+        if (props.onTimeChange) {
           setMode("time");
           setShow(true); // to show the picker again in time mode
+        }
       } else {
         if (validateTimeInput(selectedDate)) {
           setTime(moment(selectedDate));
@@ -74,8 +76,10 @@ export default function DatePicker(props) {
     if (mode == "date") {
       setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
       props.onDateChange(auxDate);
+      if (props.onTimeChange) {
         setMode("time");
         setShow(true); // to show the picker again in time mode
+      }
     } else {
       if (validateTimeInput(auxDate)) {
         setTime(moment(auxDate));
@@ -96,7 +100,7 @@ export default function DatePicker(props) {
         mode={mode}
         is24Hour={true}
         locale={"pt-br"}
-        minimumDate={new Date(moment().subtract(1, "month"))}
+        minimumDate={props.minimumDate}
         maximumDate={new Date(moment())}
         formatChosenDate={(selectedDate) => {
           if (mode == "date") {
@@ -112,7 +116,7 @@ export default function DatePicker(props) {
   };
 
   return (
-    <View>
+    <View flex={1}>
       <TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
         {props.children}
       </TouchableOpacity>
@@ -144,7 +148,6 @@ export default function DatePicker(props) {
                   borderTopColor: "#d3d3d3",
                   borderTopWidth: 1,
                 }}
-                //      onPress={() => console.log("datepicker clicked")}
               >
                 <View
                   style={{
@@ -182,7 +185,9 @@ DatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
   onDateChange: () => {},
-  onTimeChange: () => {},
+  onTimeChange: undefined,
+  minimumDate: new Date(moment().subtract(1, "month")),
+  flex: 0,
 };
 
 const styles = StyleSheet.create({

src/app/components/forms/FormDatePicker.js

@@ -53,21 +53,32 @@ function PluvRegisterPicker(props) {
   );
 }
 
-export default function FormDatePicker({ formTypeFace = "events", ...props }) {
+export default function FormDatePicker({ formTypeFace = "events", onDateChange, onTimeChange, children, ...props }) {
+  const RenderFace = () => {
+    if (children)
+      return children
+    else if (formTypeFace == "events")
+      return EventsDatePicker(props)
+    else
+      return PluvRegisterPicker(props)
+  }
+
+
   return (
+    <View flex={1}>
       <DatePicker
         textStyle={{
           borderColor: colors.gray,
           borderWidth: 3,
         }}
         defaultDate={new Date()}
-        onDateChange={props.onDateChange}
-        onTimeChange={props.onTimeChange}
+        onDateChange={onDateChange}
+        onTimeChange={onTimeChange}
+        {...props}
       >
-        {formTypeFace == "events"
-          ? EventsDatePicker(props)
-          : PluvRegisterPicker(props)}
+        <RenderFace/>
       </DatePicker>
+      </View>
   );
 }