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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python如何保证输入键入数字的方法
2019/08/23 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
行政助理求职自荐信
2013/10/26 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
美容院经理岗位职责
2014/04/03 职场文书
郭明义电影观后感
2015/06/08 职场文书
调研报告的主要写法
2019/04/18 职场文书