使用
到 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>
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/24d2332a2dd1b1994e4dc95bfb8c00c8.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/936fd22dc3b1813c37a3019394d25a0a.jpeg)
参数说明
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 | 时间选择器点击【取消】按钮时时触发的事件 |