ReactNative 原生日期picker，由于项目需要自己写
2020-11-27 本文已影响0人
AlwaysLuckyMa
日期Picker
<MCDatePicker
// 默认日期
normalDate={2020/11/09}
// 是否隐藏
isHide={this.state.isShow}
// 选择完回调
getReturnValue={this.datePickerTitle.bind(this)}
// 取消picker
callBackValue={this.callbackCancle.bind(this)}
/>
constructor(props) {
super(props);
this.state = {
isShow: false, // 显示Picker
normalDate: "", // 显示文字
};
}
datePickerTitle(value) {
this.setState({
normalDate: value,
});
}
// 所有 Picker 取消回调
callbackCancle(value) {
this.setState({
isShow: value,
});
}
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",
];
