ReactNative date picker, since the project needs to write one yourself.

<MCDatePicker // Default date normalDate={2020/11/09} // Whether to hide isHide={this.state.isShow} // Select the callback GetReturnValue = {this. DatePickerTitle. Bind (this)} / / cancel the picker callBackValue = {this. CallbackCancle. Bind (this)} / > constructor(props) { super(props); This. state = {isShow: false, // Show Picker normalDate: "", // Show text}; } datePickerTitle(value) { this.setState({ normalDate: value, }); } callbackCancle(value) {this.setState({isShow: value,}); }Copy the code

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Picker,
  Modal,
  Platform,
  TouchableOpacity,
} from "react-native";

const { height, width } = Dimensions.get("window");

const itemHeight = 80;

var type;
Platform.OS === "android" ? (type = 0) : (type = 1);

export default class MCDatePicker extends Component {
  constructor(props) {
    super(props);
    dateArr = this.props.normalDate
      ? this.props.normalDate.split("/")
      : ["2020", "11", "9"];

    this.state = {
      yearTitle: String(Number(dateArr[0])) + "年", // 年 year
      monthTitle: String(Number(dateArr[1])) + "月", // 月 month
      dayTitle: String(Number(dateArr[2])) + "日", // 日 day
      yearIndex: Number(dateArr[0]) - YearInfo[0],
      monthIndex: Number(dateArr[1]) - 1,
      dayIndex: Number(dateArr[2]) - 1,
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    dateArr = nextProps.normalDate
      ? nextProps.normalDate.split("/")
      : ["2020", "11", "9"];

    this.setState({
      yearTitle: String(Number(dateArr[0])) + "年", // 年 year
      monthTitle: String(Number(dateArr[1])) + "月", // 月 month
      dayTitle: String(Number(dateArr[2])) + "日", // 日 day
      yearIndex: Number(dateArr[0]) - YearInfo[0],
      monthIndex: Number(dateArr[1]) - 1,
      dayIndex: Number(dateArr[2]) - 1,
    });
  }

  // 取消按钮
  cancle = () => {
    this.props.callBackValue(false);
  };

  // 确定按钮
  isOK = () => {
    this.props.getReturnValue(
      YearInfo[this.state.yearIndex] +
        "/" +
        MonthInfo[this.state.monthIndex] +
        "/" +
        DayInfo[this.state.dayIndex]
    );
    this.props.callBackValue(false);
  };

  render() {
    const { isHide } = this.props;
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={isHide}
        onShow={() => {}}
        onRequestClose={() => {
          this.props.callBackValue(false);
        }}
      >
        <TouchableOpacity
          style={currentViewStyle.modalStyle}
          onPress={() => this.cancle()}
          hitSlop={{ bottom: type === 0 ? -itemHeight : null }}
          activeOpacity={1}
        >
          {/* 确定 取消 */}
          <View style={{ flexDirection: "row", backgroundColor: "white" }}>
            <TouchableOpacity
              style={currentViewStyle.TOLeftStyle}
              onPress={() => this.cancle()}
            >
              <Text>{"取消"}</Text>
            </TouchableOpacity>

            <View style={currentViewStyle.lineStyle} />

            <TouchableOpacity
              style={currentViewStyle.TORightStyle}
              onPress={() => this.isOK()}
            >
              <Text style={currentViewStyle.TORightTextStyle}>{"确定"}</Text>
            </TouchableOpacity>
          </View>

          {/* 日期Picker */}
          <View
            style={{
              flexDirection: "row",
              height: type === 0 ? itemHeight : null,
            }}
          >
            {/* 年Picker */}
            <Picker
              selectedValue={this.state.yearTitle} // 选中状态
              style={currentViewStyle.pickerStyle}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({
                  yearTitle: itemValue, // 选中状态
                  yearIndex: itemIndex, // 当前选中的年份
                });
                // // YearInfo MonthInfo DayInfo
                // this.props.getReturnValue(
                //   YearInfo[itemIndex] +
                //     "/" +
                //     MonthInfo[this.state.monthIndex] +
                //     "/" +
                //     DayInfo[this.state.dayIndex]
                // );
              }}
            >
              {YearInfo.map((info, index) => {
                return (
                  <Picker.Item
                    label={String(info) + "年"}
                    value={String(info) + "年"}
                  />
                );
              })}
            </Picker>

            {/* 月Picker */}
            <Picker
              selectedValue={this.state.monthTitle}
              style={currentViewStyle.pickerStyle}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({
                  monthTitle: itemValue,
                  monthIndex: itemIndex,
                });
                // YearInfo MonthInfo DayInfo
                // this.props.getReturnValue(
                //   YearInfo[this.state.yearIndex] +
                //     "/" +
                //     MonthInfo[itemIndex] +
                //     "/" +
                //     DayInfo[this.state.dayIndex]
                // );
              }}
            >
              {MonthInfo.map((info, index) => {
                return (
                  <Picker.Item
                    label={String(info) + "月"}
                    value={String(info) + "月"}
                  />
                );
              })}
            </Picker>

            {/* 日Picker */}
            <Picker
              selectedValue={this.state.dayTitle}
              style={currentViewStyle.pickerStyle}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({
                  dayTitle: itemValue,
                  dayIndex: itemIndex,
                });
                // YearInfo MonthInfo DayInfo
                // this.props.getReturnValue(
                //   YearInfo[this.state.yearIndex] +
                //     "/" +
                //     MonthInfo[this.state.monthIndex] +
                //     "/" +
                //     DayInfo[itemIndex]
                // );
              }}
            >
              {DayInfo.map((info, index) => {
                return (
                  <Picker.Item
                    label={String(info) + "日"}
                    value={String(info) + "日"}
                  />
                );
              })}
            </Picker>
          </View>
        </TouchableOpacity>
      </Modal>
    );
  }
}

const currentViewStyle = StyleSheet.create({
  // modal的样式
  modalStyle: {
    backgroundColor: "rgba(1,1,1,0.5)",
    justifyContent: "flex-end",
    flex: 1,
  },
  TOLeftStyle: {
    paddingLeft: 20,
    flex: 4,
    height: 40,
    backgroundColor: "white",
    justifyContent: "center",
  },
  lineStyle: { height: 40, width: 1, backgroundColor: "#F2F2F2" },
  TORightStyle: {
    paddingRight: 20,
    flex: 4,
    height: 40,
    backgroundColor: "white",
    justifyContent: "center",
  },
  TORightTextStyle: {
    textAlign: "right",
    backgroundColor: "white",
  },
  pickerStyle: {
    width: width / 3,
    height: type === 0 ? itemHeight : null,
    backgroundColor: "#F2F2F2",
  },
});

// YearInfo MonthInfo DayInfo
// 年
const YearInfo = [
  "1900",
  "1901",
  "1902",
  "1903",
  "1904",
  "1905",
  "1906",
  "1907",
  "1908",
  "1909",
  "1910",
  "1911",
  "1912",
  "1913",
  "1914",
  "1915",
  "1916",
  "1917",
  "1918",
  "1919",
  "1920",
  "1921",
  "1922",
  "1923",
  "1924",
  "1925",
  "1926",
  "1927",
  "1928",
  "1929",
  "1930",
  "1931",
  "1932",
  "1933",
  "1934",
  "1935",
  "1936",
  "1937",
  "1938",
  "1939",
  "1940",
  "1941",
  "1942",
  "1943",
  "1944",
  "1945",
  "1946",
  "1947",
  "1948",
  "1949",
  "1950",
  "1951",
  "1952",
  "1953",
  "1954",
  "1955",
  "1956",
  "1957",
  "1958",
  "1959",
  "1960",
  "1961",
  "1962",
  "1963",
  "1964",
  "1965",
  "1966",
  "1967",
  "1968",
  "1969",
  "1970",
  "1971",
  "1972",
  "1973",
  "1974",
  "1975",
  "1976",
  "1977",
  "1978",
  "1979",
  "1980",
  "1981",
  "1982",
  "1983",
  "1984",
  "1985",
  "1986",
  "1987",
  "1988",
  "1989",
  "1990",
  "1991",
  "1992",
  "1993",
  "1994",
  "1995",
  "1996",
  "1997",
  "1998",
  "1999",
  "2000",
  "2001",
  "2002",
  "2003",
  "2004",
  "2005",
  "2006",
  "2007",
  "2008",
  "2009",
  "2010",
  "2011",
  "2012",
  "2013",
  "2014",
  "2015",
  "2016",
  "2017",
  "2018",
  "2019",
  "2020",
  "2021",
  "2022",
  "2023",
  "2024",
  "2025",
  "2026",
  "2027",
  "2028",
  "2029",
  "2030",
  "2031",
  "2032",
  "2033",
  "2034",
  "2035",
  "2036",
  "2037",
  "2038",
  "2039",
  "2040",
  "2041",
  "2042",
  "2043",
  "2044",
  "2045",
  "2046",
  "2047",
  "2048",
  "2049",
];

// 月
const MonthInfo = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "11",
  "12",
];

// 日
const DayInfo = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15",
  "16",
  "17",
  "18",
  "19",
  "20",
  "21",
  "22",
  "23",
  "24",
  "25",
  "22",
  "27",
  "28",
  "29",
  "30",
  "31",
];
Copy the code