How to show selected date and time in textinput in react native? - react-native

Question

Im very new to React native. Im using react-native-community/datetimepicker library and I find it very confusing. Below is my code, what should I add to make it functional and show selected date and time in screen? I would appreciate your help!
import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '#react-native-community/datetimepicker';
export const App = () => {
const [date, setDate] = useState(new Date(1598051730000));
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(Platform.OS === 'ios');
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
<View>
<Button onPress={showTimepicker} title="Show time picker!" />
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};

Answer 1

You should try saving the selected date\time somewhere and then you can show it anywhere you want. Do something like this:
import React, { useState } from "react";
import { Button, Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker"; //install and import
import { SafeAreaView } from "react-native";
export const Picker = () => {
const [selectedDate, setselectedDate] = useState("");
const [selectedTime, setselectedTime] = useState("");
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [isTimePickerVisible, setTimePickerVisibility] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const showTimePicker = () => {
setTimePickerVisibility(true);
};
const hideTimePicker = () => {
setTimePickerVisibility(false);
};
const handleDate = (date) => {
setselectedDate(date.toDateString());
hideDatePicker();
};
const handleTime = (time) => {
setselectedTime(time.toLocaleTimeString());
hideTimePicker();
};
return (
<SafeAreaView>
<View style={styles.container}>
<View>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleDate}
onCancel={hideDatePicker}
minimumDate={new Date()}
maximumDate={new Date()}
/>
</View>
<View>
<Button title="Show Time Picker" onPress={showTimePicker} />
<DateTimePickerModal
isVisible={isTimePickerVisible}
mode="time"
onConfirm={handleTime}
onCancel={hideTimePicker}
/>
</View>
<View>
<Text>{selectedDate}</Text>
<Text>{selectedTime}</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 300,
},
});