1

Intento guardar la fecha dentro de:

const [eventDate, setEventDate] = useState("");

Estoy utilizando:

import DateTimePickerModal from "react-native-modal-datetime-picker";

const handleConfirm = date => {
    var fecha = moment(date).format("DD/MM/YYYY HH:mm:ss");
    console.log(fecha);
    () => setEventDate(fecha);
    hideDatePicker();
  };

La variable fecha por consola me devuelve:

27/02/2020 10:35:58

Pero esta no se almacena dentro de EventDate.

dejo un fragmento de codigo más amplio:

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  View,
  ScrollView,
  Alert,
  Dimensions,
  Picker
} from "react-native";
import {
  Icon,
  Avatar,
  Image,
  Input,
  Button,
  Card,
  CheckBox,
  Text
} from "react-native-elements";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";
import moment from "moment";
import RNDateTimePicker from "@react-native-community/datetimepicker";

const widthScreen = Dimensions.get("window").width;

export default function AddEventForm(props) {
  const { toastRef, setIsLoading, navigation } = props;
  const [imagesSelected, setImagesSelected] = useState([]);
  const [eventName, setEventName] = useState("");
  const [eventDescription, setEventDescription] = useState("");
  const [eventDate, setEventDate] = useState("");
  const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState(false);
  const [eventType, setEventType] = useState("");
  const [eventStatus, setEventStatus] = useState("");
  const [eventCapacity, setEventCapacity] = useState("");
  const [eventMapUbication, setEventMapUbication] = useState("");
  const [eventCountry, setEventCountry] = useState("");
  const [eventState, setEventState] = useState("");
  const [eventStreet, setEventStreet] = useState("");
  const [eventPostalCode, setEventPostalCode] = useState("");
  const [date, setDate] = useState(new Date().getDate());
  const [mode, setMode] = useState("date");
  const [show, setShow] = useState(false);

  const testeoVariables = () => {
    console.log("eventName " + eventName);
    console.log("eventDescription " + eventDescription);
    console.log("eventCapacity " + eventCapacity);
    console.log("eventMapUbication " + eventMapUbication);
    console.log("eventCountry " + eventCountry);
    console.log("eventState " + eventState);
    console.log("eventStreet " + eventStreet);
    console.log("eventPostalCode " + eventPostalCode);
    console.log("eventdate " + eventDate);
    console.log("eventype " + eventType);
  };

  return (
    <ScrollView>
      <ImageEventFeatured imageEvent={imagesSelected[0]} />
      <UploadImage
        imagesSelected={imagesSelected}
        setImagesSelected={setImagesSelected}
        toastRef={toastRef}
      />
      <FormAdd
        setEventName={setEventName}
        setEventDescription={setEventDescription}
        setEventDate={setEventDate}
        eventDate={eventDate}
        setEventType={setEventType}
        eventType={eventType}
        setEventStatus={setEventStatus}
        setEventCapacity={setEventCapacity}
        setEventMapUbication={setEventMapUbication}
        setEventCountry={setEventCountry}
        setEventState={setEventState}
        setEventStreet={setEventStreet}
        setEventPostalCode={setEventPostalCode}
        date={date}
        mode={mode}
        show={show}
        setDate={setDate}
        setShow={setShow}
        setMode={setMode}
        testeoVariables={testeoVariables}
      />
    </ScrollView>
  );
}

function FormAdd(props) {

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
    console.log(selectedDate);
    setShow(Platform.OS === "ios" ? true : false);
  };

  const showMode = currentMode => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode("date");
  };

  const showTimepicker = () => {
    showMode("time");
  };

  const {
    setEventName,
    setEventDescription,
    setEventDate,
    eventDate,
    setEventType,
    eventType,
    setEventStatus,
    setEventCapacity,
    setEventMapUbication,
    setEventCountry,
    setEventState,
    setEventStreet,
    setEventPostalCode,
    setDate,
    setShow,
    setMode,
    date,
    mode,
    show,
    testeoVariables
  } = props;

  return (
    <View style={styles.viewForm}>
      <Card>
        <View>
          <Text style={styles.txtHeadline} h4>
            Información del evento
          </Text>
          <Input
            placeholder="Nombre del evento"
            containerStyle={styles.input}
            onChange={e => setEventName(e.nativeEvent.text)}
          />
          <Input
            placeholder="Descripción"
            containerStyle={styles.textArea}
            multiline={true}
            onChange={e => setEventDescription(e.nativeEvent.text)}
          />
        </View>
        <View>
          <View>
            <Button onPress={showDatepicker} title="Show date picker!" />
          </View>
          {show && (
            <RNDateTimePicker
              value={new Date()}
              mode="date"
              onChange={onChange}
            />
          )}
        </View>
      </Card>
      <Card>
        <View style={styles.containerEventType}>
          <Text style={styles.txtHeadline} h4>
            Tipo de evento
          </Text>
          <Picker
            mode={"dropdown"}
            selectedValue={eventType == null ? "java" : eventType}
            style={{ height: 50, width: 100 }}
            onValueChange={(itemValue, itemIndex) => setEventType(itemValue)}
          >
            <Picker.Item label="Java" value="java" />
            <Picker.Item label="JavaScript" value="js" />
          </Picker>
        </View>
      </Card>
      <Card>
        <Text style={styles.txtHeadline} h4>
          Ubicación y capacidad
        </Text>
        <Input
          placeholder="Aforo del evento"
          containerStyle={styles.input}
          keyboardType="numeric"
          maxLength={1000000}
          onChange={e => setEventCapacity(e.nativeEvent.text)}
        />
        <Input
          placeholder="Ubicación en el mapa"
          rightIcon={{
            type: "material-community",
            name: "google-maps",
            color: "#c2c2c2",
            onPress: () => console.log("Seleccione la ubicación")
          }}
          containerStyle={styles.input}
          onChange={e => setEventMapUbication(e.nativeEvent.text)}
        />
        <Input
          placeholder="País"
          containerStyle={styles.input}
          onChange={e => setEventCountry(e.nativeEvent.text)}
        />
        <Input
          placeholder="Municipio"
          containerStyle={styles.input}
          onChange={e => setEventState(e.nativeEvent.text)}
        />
        <Input
          placeholder="Calle"
          containerStyle={styles.input}
          onChange={e => setEventStreet(e.nativeEvent.text)}
        />
        <Input
          placeholder="Código Postal"
          containerStyle={styles.input}
          onChange={e => setEventPostalCode(e.nativeEvent.text)}
        />
      </Card>
      <Button title="Crear evento" onPress={testeoVariables} />
    </View>
  );
}
1
  • agrega todo el codigo del componente Commented el 25 feb. 2020 a las 16:56

2 respuestas 2

1

Debes settear la variable para enviarla al Form

const handleConfirm = date => {
    setEventDate(moment(date).format("DD/MM/YYYY HH:mm:ss"));
    hideDatePicker();
  };

esto funciono para mi

0

No se si todavía te sirva, pero es probable que tu hook no tenga el formato de fecha intenta declararlo así:

const[eventDate, seteventDate] = useState(new Date())

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.