Is there a way to show on the screen the picked date in React Native?

Question

Is there a way to show on the screen a picked date?

I tried to make a date picker and show the picked date on the screen close to each button. For example, if I select any date, I want to display the date near the button. How can I do this the right way?

I added a Snack expo for my example: SNACK

import React, { useState } from "react";
import { View, Button, Platform, StyleSheet, TextInput } from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";

const MyDatePicker = () => {
  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 style={styles.container}>
      <View>
        <Button
          style={{ marginRight: 10 }}
          onPress={showDatepicker}
          title="FROM DATE"
        />
      </View>
      <View>
        <Button
          style={{ marginRight: 10 }}
          onPress={showDatepicker}
          title="TO DATE"
        />
        {/* <Button onPress={showTimepicker} title="Show time picker!" /> */}
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          timeZoneOffsetInMinutes={0}
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    marginTop: 50,
    paddingBottom: 550,
    justifyContent: "space-between",
    flexDirection: "row",
    marginHorizontal: 80
  }
});

export default MyDatePicker;

Answer 1

You can do something like this, I had made some changes in your code

import React, { useState } from "react";
import { View, Button, Platform, StyleSheet, TextInput, Text } from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";

const MyDatePicker = () => {
    const today = new Date();
  const [date1, setDate1] = useState(new Date(today));
  const [date2, setDate2] = useState(new Date(today));
  const [mode, setMode] = useState("date");
  const [show1, setShow1] = useState(false);
  const [show2, setShow2] = useState(false);

  const onChange1 = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow1(Platform.OS === "ios");
    setDate1(currentDate);
  };

  const onChange2 = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow2(Platform.OS === "ios");
    setDate2(currentDate);
  };

  const showMode1 = currentMode => {
    setShow1(true);
    setMode(currentMode);
  };

  const showMode2 = currentMode => {
    setShow2(true);
    setMode(currentMode);
  };

  const showDatepicker1 = () => {
    showMode1("date");
  };

  const showDatepicker2 = () => {
    showMode2("date");
  };

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

  return (
    <View style={styles.container}>

      <View style={{marginLeft: 20}}>
        <Button
          onPress={showDatepicker1}
          title="FROM DATE"
        />

      </View>
      <View>
          <Text>{date1.toISOString().slice(0,10)}</Text>
        </View>

      <View style={{marginLeft: 20}}>
        <Button
          onPress={showDatepicker2}
          title="TO DATE"
        />


        {/* <Button onPress={showTimepicker} title="Show time picker!" /> */}
      </View>
      <View>
          <Text>{date2.toISOString().slice(0,10)}</Text>
        </View>  
      {show1 && (

        <DateTimePicker
          testID="dateTimePicker"
          timeZoneOffsetInMinutes={0}
          value={date1}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange1}
        />
      )}
     {show2 && (

              <DateTimePicker
                  testID="dateTimePicker"
                  timeZoneOffsetInMinutes={0}
                  value={date2}
                  mode={mode}
                  is24Hour={true}
                  display="default"
                  onChange={onChange2}
              />
)}


    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    alignItems:"center",
    flex: 1,
    marginTop: 50,
    paddingBottom: 550,
    flexDirection: "row",

  }
});

export default MyDatePicker;

I had added two text components where you can show the date.

Hope this helps!