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 装载iframe子页面,自适应高度
Mar 20 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
JS通用方法触发点击事件代码实例
Feb 17 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
第一节--面向对象编程
2006/11/16 PHP
php中设置多级目录session的问题
2011/08/08 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python切片知识解析
2016/03/06 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
印度网上药店:1mg
2017/10/13 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
便利店的创业计划书
2014/01/15 职场文书
模具数控专业自荐信
2014/01/27 职场文书
财务出纳岗位职责
2014/02/03 职场文书
婚礼主持结束词
2014/03/13 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
邹越演讲观后感
2015/06/15 职场文书
小学生读书笔记
2015/07/01 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python