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中的数学函数集合
May 08 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
JavaScript多种图形实现代码实例
Jun 28 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php中explode与split的区别介绍
2012/10/03 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
总务岗位职责
2013/11/19 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang