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

前言:

         虽然之前的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;
      }

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

微信扫码订阅
UP更新不错过~
关注
  • 2
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

小奶狗先生

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值