React Native 日期选择器

项目中要用到日期选择器,类似这样:

在React Native 中ios 有DatePickerIOS,android 有DatePickerAndroid,本人只是试了下ios,设置node= date,显示出来的效果是:

  render() {
    return (
      <View style={styles.container}>
        <DatePickerIOS
          date={this.state.chosenDate}
          onDateChange={this.setDate}
          mode = 'date'
          //format="YYYY-MM-DD"
        />
      </View>
    )
  }
}

达不到我要显示的效果,为啥是英文的,于是开始搜网站,发现两个比较好的组件:

 //集成了ios 和android ,两个个平台组件长得不一样,但都和原生一样。
(1)https://www.npmjs.com/package/react-native-datepicker 

 //类似ios,两个平台长得差不多,这个后期可能会用到。
(2)https://github.com/henninghall/react-native-date-picker

 //这个网站有很多封装好的组件,需要学习一下。
(3)https://github.com/forrest23/ReactNativeComponents 

 //和1类似,应该是同一个
(4)https://mp.weixin.qq.com/s/PAcIUkUSCStubGz2a-LNOg

 //这是另外一种日期选择器
 https://swift.ctolib.com/article/wiki/111090

//这个日期选择器可以进行各种类型的选择 城市 民族,应该都可以实现。
https://blog.csdn.net/xukongjing1/article/details/85018902

后来问Q友,告诉我国际化,奥,有个属性是locale,我没有理解,原来是通过国际化显示中国的显示形式,于是改代码为:

  render() {
    return (
      <View style={styles.container}>
        <DatePickerIOS
          date={this.state.chosenDate}
          onDateChange={this.setDate}
          mode = 'date'
          format="YYYY-MM-DD"
          //ormat="YYYY年MM月DD日"
          locale = 'zh-Hans'
        />
      </View>
    )
  }
}

结果出来了,开心!!!

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值