React Native日期时间选择组件的示例代码


Posted in Javascript onApril 27, 2018

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

效果图

React Native日期时间选择组件的示例代码

安装方法

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:占位符

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Javascript 面向对象之重载
May 04 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
详解ES6中的let命令
Apr 05 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
vue实现点击展开点击收起效果
Apr 27 #Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 #Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 #Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 #Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 #Javascript
Node.js文件编码格式的转换的方法
Apr 27 #Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
You might like
PHP命名空间和自动加载类
2016/04/03 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python打印输出数组中全部元素
2018/03/13 Python
儿童编程python入门
2018/05/08 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
安全资金保障制度
2014/01/23 职场文书
幼儿教师研修感言
2014/02/12 职场文书
团队精神口号
2014/06/06 职场文书
医学生求职信
2014/07/01 职场文书
2014年学生会工作总结
2014/11/07 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android