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 { FontAwesome5 } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker";

import moment from "moment";
import colors from "../../config/colors";

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

  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) {
      setDate(moment(selectedDate));
      props.onDateChange(selectedDate);
    }
  };

  const onCancelPress = () => {
    //setDate(moment(defaultDate));
    setShow(false);
    //console.log(moment(defaultDate).format("DD-MM-YYYY"))
  };

  const onDonePress = () => {
    setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
    props.onDateChange(auxDate);
    setShow(false);
    //console.log("done");
    //console.log(date.format("DD-MM-YYYY"));
  };

  const renderDatePicker = () => {
    return (
      <DateTimePicker
        timeZoneOffsetInDays={-1}
        value={new Date(auxDate)}
        mode="date"
        minimumDate={new Date(moment().subtract(1, "month"))}
        maximumDate={new Date(moment())}
        formatChosenDate={(selectedDate) => {
          return moment(selectedDate).format("DD/MM/YYYY");
        }} //formatar a data 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.dateInput }>
          <Text> {date.format("DD/MM/YYYY")}</Text>
        </View>
        <FontAwesome5
          name="calendar-day"
          size={30}
          color="grey"
        />
      </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: () => { },
};

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.97,
    backgroundColor: colors.light,
    borderRadius: 25,
    padding: 18,
    marginVertical: 10,
  }
});

export default FormDatePicker;