mobile-darmasaba/components/inputDate.tsx

import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { stringToDate } from "@/lib/fun_stringToDate";
import DateTimePicker from "@react-native-community/datetimepicker";
import dayjs from "dayjs";
import { useState } from "react";
import { Pressable, View } from "react-native";
import Text from "./Text";

type Props = {
   label?: string;
   placeholder?: string;
   onChange: (val: string) => void;
   info?: string;
   error?: boolean;
   errorText?: string;
   required?: boolean;
   mode: 'date' | 'datetime' | 'time'
   round?: boolean
   width?: number
   bg?: 'white' | 'transparent'
   value?: string
   disable?: boolean
};


export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
   const [modal, setModal] = useState(false);

   const onChangeDate = (type: string, selectedDate: any) => {
      if (type === "set") {
         if (mode == "date") {
            onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
         } else if (mode == "time") {
            onChange(dayjs(selectedDate).format("HH:mm"))
         }
         setModal(false)
      } else {
         setModal(false);
      }
   };

   return (
      <>
         <View style={[Styles.mb10]}>
            {
               label != undefined && (
                  <Text style={[Styles.mb05, error && Styles.cError]}>
                     {label}
                     {required && (<Text style={Styles.cError}>*</Text>)}
                  </Text>
               )
            }
            <Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: 'white' }]} onPress={() => setModal(true)} disabled={disable}>
               <Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
            </Pressable>
            {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
            {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
         </View>
         {
            modal && (
               <DateTimePicker
                  value={new Date()}
                  mode={mode}
                  display="default"
                  onChange={(event, date) => { onChangeDate(event.type, date) }}
                  onTouchCancel={() => setModal(false)}
               />
            )
         }
      </>
   )
}