1.安装依赖:
npm i react-native-date-picker --save
2.代码及解释:
import React, { Component } from 'react'
import {
SafeAreaView,
} from 'react-native';
import DatePicker from 'react-native-date-picker';
export default class TaskIndex extends Component {
constructor(props) {
super(props);
this.state={
dateTime: new Date(),
modalVisible: false,
}
}
onDateChange = (date) => {
this.setState({
dateTime: date,
});
}
// 取到过去一年的时间
getPassFormatDate = () => {
var nowDate = new Date();
var date = new Date(nowDate);
date.setDate(date.getDate()-30);
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
render() {
const minimumDate = new Date(this.getPassFormatDate());
return (
<SafeAreaView style={{flex:1}}>
<DatePicker
date={this.state.dateTime} // 设置初始的时间
mode='datetime' // 显示的模式,date,datetime,time
placeholder='请选择时间' // 占位符
minuteInterval={5} // 设置分钟间隔
onDateChange={this.onDateChange}//日期变化时触发的事件
locale="zh" // zh组件中显示中文,us组件中显示英文(默认)
// 设置最大和最小的时间也可以不用
// minimumDate={minimumDate} // 设置最小时间
// maximumDate={date} // 设置最大时间
/>
</SafeAreaView>
)
}
}