仅从DateTimePickerModal中提取月份和年份响应本机

问题描述

我想从选择器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格式显示

解决方法

尝试这种方式

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;