微信小程序----开发rui-dtpicker多粒度日期组件

使用

到 GitHub 下载 WX-RUI 的代码，将 component 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 dtpicker 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {"rui-dtpicker": "../../component/picker/picker"
}

2. 在 wxml 中使用组件：

2.1 时间粒度为second的实例

<rui-dtpicker start="2018-03-15 10:45:00" end="2050-03-15 10:45:00" value="{{value}}" fields="second" bindchangedatepicker="changeDate"bindcanceldatepicker="cancelDate"
></rui-dtpicker>

2.2 时间粒度为year的实例

<rui-dtpicker start="2018" end="2050" value="{{value}}" fields="year" bindchangedatepicker="changeDate"bindcanceldatepicker="cancelDate"
></rui-dtpicker>

效果图

参数说明

rui-dtpicker 属性说明：

属性名	类型	默认值	说明
start	String	‘1900-00-00 00:00:00’	限制选择器选择的最小时间
end	String	‘2500-12-30 23:59:59’	限制选择器选择的最大时间
value	String	‘2019-03-15 10:45:00’	当前时间选择器显示的时间
fields	String	‘second’	时间选择器的粒度
disabled	Boolean	false	是否为禁用状态

fields 值说明：

值	类型	说明
year	String	选择器粒度为年
month	String	选择器粒度为月份
day	String	选择器粒度为天
hour	String	选择器粒度为小时
minute	String	选择器粒度为分钟
second	String	选择器粒度为秒

事件说明：

事件名称	说明
change	时间选择器点击【确定】按钮时时触发的事件，参数为picker的当前的 value
cancel	时间选择器点击【取消】按钮时时触发的事件

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----开发rui-dtpicker多粒度日期组件相关推荐

微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
微信小程序开发教程：项目五导航组件课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题简述如何动态设置窗口的背景色. 六.编程题 1.设计一款 ...
微信小程序开发教程：项目六媒体组件课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题请简单列举音频接口API创建的InnerAudioCon ...
微信小程序开发尚学堂介绍项目结构组件喧嚷事件模板
一.微信小程序介绍 1. 微信小程序介绍微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
微信小程序开发实现轮番图效果swiper 组件
轮番效果在很多的网站主页或者手机应用端都能看到,在微信小程序中使用swiper组件来实现图片轮番,今天的小例子效果如下: 为了方便演示我将动画切换的间隔调整为3s,现实项目中一般为5s,具体看项目需求 ...
微信小程序开发实战（二）UI组件介绍 Vant Weapp
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1 第三方组件库 Vant We ...
微信小程序|开发实战篇之八-list列表组件及其子组件
开发实战篇之八前言 1.list选择器组件 1.1 子组件---tag标签组件 1.1.1 tag的骨架文件wxml 1.1.2 tag的js文件 2.list选择器wxml骨架文件 3.list选 ...
微信小程序开发03(样式wxss与常用组件)
样式与常用组件
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

微信小程序----开发rui-dtpicker多粒度日期组件

使用

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

2. 在 wxml 中使用组件：

效果图

参数说明

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

微信小程序----开发rui-dtpicker多粒度日期组件相关推荐

最新文章

热门文章