React Native日期时间选择组件

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

首先祝大家劳动节快乐,劳动最光荣!

React Native日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期、单独选择时间和选择日期和时间,支持自定义日期格式。

效果图

安装方法

npm install react-native-datepicker --save

示例代码

<Text style={styles.instructions}>time: {this.state.time}</Text>
        <DatePicker
          style={{width: 200}}
          date={this.state.datetime}
          mode="datetime"
          format="YYYY-MM-DD HH:mm"
          confirmBtnText="确定"
          cancelBtnText="取消"
          showIcon={false}
          onDateChange={(datetime) => {this.setState({datetime: datetime});}}
        />
        <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
        <DatePicker
          style={{width: 200}}
          date={this.state.datetime1}
          mode="datetime"
          format="YYYY-MM-DD HH:mm"
          confirmBtnText="确定"
          cancelBtnText="取消"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0
            },
            dateInput: {
              marginLeft: 36
            }
          }}
          minuteInterval={10}
          onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
        />
        <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>

主要参数说明

date:设置初始显示的日期 mode:显示的模式,date,datetime,time format:设置日期格式,默认为'YYYY-MM-DD' confirmBtnText:确定按钮的显示名称 cancelBtnText:取消按钮的显示名称 minDate:显示的最小日期 maxDate:显示的最大日期 duration:时间间隔 onDateChange:日期变化时触发的事件 placeholder:占位符

完整示例

完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例本次示例代码在 Component11文件夹中。请不要吝啬你们的Star

组件地址

GitHub - xgfe/react-native-datepicker: react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

原文发布于微信公众号 - ReactNative开发圈(ReactNative-Circle)

原文发表时间:2018-04-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

1061
来自专栏Zchannel

#Linux建站入门第三期#使用Linux面板进行建站

linux最大的特点就是文字界面,不像windows可以不输入任何命令就可以进行各种操作(虽然linux系统也有图形界面但是不建议使用,因为图形界面无法完成很多...

2954
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

1755
来自专栏Objective-C

Xcode 清理存储空间

4085
来自专栏草根专栏

使用VS Code开发asp.net core (上)

本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://cod...

3425
来自专栏移动端开发

告诉你 iOS9.0 之后的Bitcode到底是什么!!

 用Xcode 7 beta 3在真机(iOS 8.3)上运行一下工程,结果发现工程编译不过。看了下问题,报的是以下错误: ld: ‘/Users/**/Fr...

3828
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

2319
来自专栏卡少编程之旅

fiddler抓包工具(windows)

75515
来自专栏Debian社区

Debian 9.2 发布,大量问题修复

Debian 9.2 发布了。此次发布情况特殊,使用”apt-get“工具执行升级的用户将需要确保使用”dist-upgrade“命令,以便更新到最新的内核软件...

791
来自专栏十月梦想

node读取文件进阶(详解)

刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访...

872

扫码关注云+社区

领取腾讯云代金券