WPD-MobileApp/src/app/components/forms/FormDatePicker.js

import React, { useState } from "react";
import {
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  Platform,
  TouchableOpacity,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker";

import moment from "moment";
import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions";

const FormDatePicker = (props) => {
  const { textStyle, defaultDate } = props;
  const [date, setDate] = useState(moment(defaultDate));
  const [show, setShow] = useState(false);
  const [auxDate, setAuxDate] = useState(moment());
  const [mode, setMode] = useState("date");
  const [time, setTime] = useState(moment(defaultDate));

  //-------------------------- Time picker ainda não está habilitado pra ios  --------------------------------

  const onChange = (e, selectedDate) => {
    setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
  };

  const androidOnChange = (e, selectedDate) => {
    setShow(false);
    if (selectedDate) {
      if (mode == "date") {
        setDate(moment(selectedDate));
        props.onDateChange(selectedDate);
        setMode("time");
        setShow(true); // to show the picker again in time mode
      } else {
        setTime(moment(selectedDate));
        props.onTimeChange(selectedDate);
        setShow(false);
        setMode("date");
      }
    }
  };

  const onCancelPress = () => {
    setShow(false);
  };

  const onDonePress = () => {
    setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
    props.onDateChange(auxDate);
    setShow(false);
  };

  const formatDate = (date, time) => {
    time.getHours();
    time.getMinuts();
  };

  const renderDatePicker = () => {
    return (
      <DateTimePicker
        timeZoneOffsetInDays={-1}
        value={new Date(auxDate)}
        mode={mode}
        is24Hour={true}
        minimumDate={new Date(moment().subtract(1, "month"))}
        maximumDate={new Date(moment())}
        formatChosenDate={(selectedDate) => {
          if (mode == "date") {
            return moment(selectedDate).format("DD/MM/YYYY");
          } else {
            return moment(selectedDate).format("HH:mm");
          }
        }} //formatar a data e hora do selected date
        display={Platform.OS === "ios" ? "spinner" : "default"}
        onChange={Platform.OS === "ios" ? onChange : androidOnChange}
      />
    );
  };

  return (
    <TouchableOpacity onPress={() => setShow(true)}>
      <View
        style={{
          flex: 1,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <View style={styles.dateIcon}>
          <MaterialCommunityIcons
            name="calendar-today"
            size={30}
            color="white"
            alignItems="center"
          />
        </View>
        <View style={styles.dateInput}>
          <Text style={{ fontSize: dimensions.text.default }}>
            {" "}
            {date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
          </Text>
        </View>
      </View>
      {Platform.OS !== "ios" && show && renderDatePicker()}

      {Platform.OS === "ios" && show && (
        <Modal
          transparent={true}
          animationType="slide"
          visible={show}
          supportedOrientations={["portrait"]}
          onRequestClose={() => setShow(false)}
        >
          <View style={{ flex: 1 }}>
            <TouchableHighlight
              style={{
                flex: 1,
                alignItems: "flex-end",
                flexDirection: "row",
              }}
              activeOpacity={1}
              visible={show}
              onPress={() => setShow(false)}
            >
              <TouchableHighlight
                underlayColor={"#ffffff"}
                style={{
                  flex: 1,
                  borderTopColor: "#d3d3d3",
                  borderTopWidth: 1,
                }}
                onPress={() => console.log("datepicker clicked")}
              >
                <View
                  style={{
                    backgroundColor: "#ffffff",
                    height: 256,
                    overflow: "hidden",
                  }}
                >
                  <View style={{ marginTop: 20 }}>{renderDatePicker()}</View>
                  <TouchableHighlight
                    underlayColor={"transparent"}
                    onPress={() => onCancelPress()}
                    style={[styles.btnText, styles.btnCancel]}
                  >
                    <Text style={{ color: colors.primary }}>Cancelar</Text>
                  </TouchableHighlight>
                  <TouchableHighlight
                    underlayColor={"transparent"}
                    onPress={() => onDonePress()}
                    style={[styles.btnText, styles.btnDone]}
                  >
                    <Text style={{ color: colors.primary }}>Confirmar</Text>
                  </TouchableHighlight>
                </View>
              </TouchableHighlight>
            </TouchableHighlight>
          </View>
        </Modal>
      )}
    </TouchableOpacity>
  );
};

FormDatePicker.defaultProps = {
  textStyle: {},
  defaultDate: moment(),
  onDateChange: () => {},
  onTimeChange: () => {},
};

const styles = StyleSheet.create({
  btnCancel: {
    left: 0,
  },
  btnDone: {
    right: 0,
  },
  btnText: {
    position: "absolute",
    top: 0,
    height: 42,
    paddingHorizontal: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  dateInput: {
    flex: 0.8,
    backgroundColor: colors.white,
    borderRadius: 25,
    marginVertical: 10,
  },
  dateIcon: {
    backgroundColor: colors.primary,
    padding: 8,
    width: 20,
    alignItems: "center",
    borderRadius: 5,
    flex: 0.2,
  },
});

export default FormDatePicker;