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

Rattenking

发布于 2021-02-01 11:02:46

4200

发布于 2021-02-01 11:02:46

文章被收录于专栏：Rattenking

使用

到 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	时间选择器点击【取消】按钮时时触发的事件

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/03/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度

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

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

使用

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

2. 在 wxml 中使用组件：

效果图

参数说明

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐