有没有办法在屏幕上显示 React Native 中选择的日期？

Question

有没有办法在屏幕上显示选择的日期？

我尝试制作一个日期选择器并在靠近每个按钮的屏幕上显示选择的日期。 例如，如果我选择任何日期，我想在按钮附近显示日期。 我怎样才能以正确的方式做到这一点？

我为我的示例添加了一个小吃博览会： 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

你可以这样做，我对你的代码做了一些修改

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;

我添加了两个可以显示日期的文本组件。

希望这会有所帮助！