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>
);
}