适用在Android和IOS平台的React-Native日期选择插件@react-native-community/datetimepicker的基本使用教程

网络投稿 02-07 4723

前言：

?????????虽然之前的react-native-datepicker很好用，但是我们如果现在使用话，会给出警告信息，告诉我们现在推出了新版本的，集成了IOS和Android的新插件，datepicker未来将会不可用。所以要及时了解其替代品 @react-native-community/datetimepicker。

使用：

首先安装: npm install @react-native-community/datetimepicker --save or yarn add @react-native-community/datetimepicker

RN >= 0.60 If you are using RN >= 0.60, only run npx pod-install. Then rebuild your project. RN < 0.60 For RN < 0.60, you need to link the dependency using react-native link: react-native link @react-native-community/datetimepicker Then run npx pod-install and rebuild your project. If this does not work, see Manual installation.

上面有几句官网的话，总之就是如果你的ReactNative版本大于等于0.60，就执行一下【npm pod-install】

这里直接使用实例来演示：导入：

import DateTimePicker from "@react-native-community/datetimepicker"

state:

state={ obj:{ //我实际项目中还有其它数据，这里就删去了 birthday:"", //生日 }, date:new Date(),//给日期控件用 show:false //是否显示时间控件 }

上面可以看出，date的类型是Date类型，这是官网要求的，也是和之前的DatePicker插件的不同之处。

render的渲染：

render(){ const {date, show} = this.state return( <View> {/*4.0 日期选择器开始*/} <View> <Button onPress={() => {this.setState({show:true})}} title="选择生日"></Button> {show && ( <DateTimePicker testID="dateTimePicker" value={date} mode="date" minimumDate={new Date(1950, 0, 1)} maximumDate={new Date()} display="spinner" onChange={this.handleDateChange} /> )} </View> {/*4.0 日期选择器结束*/} </View> ) }

看上面的DateTimePicker标签: testID随便写； value 值必填，且必须是Date日期对象类型； mode 的四个值：

date" (default for iOS and Android and Windows) “time” “datetime” (iOS only) “countdown” (iOS only)

minimumDate 和 maximumDate 分别是可选择的最大日期和最小日期，注意也是Date类型的； display 是显示的样式，有四种：

“default” Show a default date picker (spinner/calendar/clock) based on mode and Android version. “spinner” “calendar” (only for date mode) “clock” (only for time mode)

这里的时间控件是弹出型的，需要我们设置一个Button去控制日期控件显示，所以上面有个Button按钮。

选择日期的处理函数：

//这会自动给传两个参数，第一个是时间参数，第二个是选择的日期 handleDateChange = (event,date) => { //这是设置日期,即确认按钮 if(event.type === "set"){ const birthday = this.dateToString(date) let obj = this.state.obj obj.birthday = birthday this.setState({obj,show:false}) }else{ //这是点击取消按钮 this.setState({show:false}) } } //日期转字符串的函数,自己写的 dateToString = (date) => { var year = date.getFullYear(); var month =(date.getMonth() + 1).toString(); var day = (date.getDate()).toString(); if (day.length == 1) { day = "0" + day; } if (month.length == 1) { month = "0" + month; } var dateTime = year + "-" + month + "-" + day; return dateTime; }

上面的代码也比较简单，结合注释应该一目了然。基础使用到此结束，快去试试吧