仅从 DateTimePickerModal 中提取月份和年份反应原生

Question

我想从选择器 DateTimePickerModal 中提取月份和年份，用于我的应用程序的信用卡到期选择。用户将单击下拉图标，单击它会弹出日历。在选择日期时，它会将其设置为输入文本。目前它采用这种格式 (2020-11-13T12:52:09.002Z)。

下面是我的代码

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Button,
  TouchableOpacity,
} from "react-native";
import { DrawerActions } from "@react-navigation/native";
import CustomHeaderBar from "../components/CustomHeaderBarComponent";
import ButtonComponent from "../components/ButtonComponent";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { Entypo } from "@expo/vector-icons";

const PaymentScreen = ({ navigation }) => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [dateText, setDateText] = useState("");

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    setDateText(JSON.stringify(date));
    console.warn(date);
    hideDatePicker();
  };

  return (
    <View style={styles.container}>
      <CustomHeaderBar
        label="Payment"
        onPress={() => {
          navigation.dispatch(DrawerActions.toggleDrawer());
        }}
      />
      <View style={styles.RatingView}>
        <View style={styles.WrapperView}>
          <Text style={styles.PaymentText}>$ 250.00</Text>
        </View>
      </View>

      <View style={styles.lowerHalfStyle}>
        <Text style={styles.TextStyle}>Payment Method</Text>
        <View style={styles.MarginFromTop}>
          <TextInput
            style={styles.TextInputStyle}
            placeholder="Card No"
          ></TextInput>

          <View style={{ flexDirection: "row" }}>
            <TextInput
              style={styles.TextInputStyle}
              placeholder="Expiry Date (MM/YY)"
              value={dateText}
            ></TextInput>
            <TouchableOpacity onPress={showDatePicker}>
              <Entypo name="chevron-down" size={24} color="#000000" />
            </TouchableOpacity>
            <DateTimePickerModal
              isVisible={isDatePickerVisible}
              mode="date"
              onConfirm={handleConfirm}
              onCancel={hideDatePicker}
            />
          </View>

          <TextInput
            style={styles.TextInputStyle}
            placeholder="CVC"
          ></TextInput>
        </View>
        <View style={styles.MarginFromTop}>
          <ButtonComponent label="PAY" />
        </View>
      </View>
    </View>
  );
};
export default PaymentScreen;

请指导如何实现此功能，希望按照下面的屏幕截图以 MM/YY 格式显示它

Answer 1

试试这个方法

import React, { useState } from "react";
…
import moment from "moment"; // add this

const PaymentScreen = ({ navigation }) => {

  …..

  const handleConfirm = (date) => {
    //setDateText(JSON.stringify(date)); // remove this
    console.warn(date);
    const monthAndYear = moment(date).format("MM/YYYY”); // add this
    setDateText(monthAndYear);
    hideDatePicker();
  };

  return (
    <View style={styles.container}>
      ……
    </View>
  );
};
export default PaymentScreen;