uni-app picker组件开发----多粒度时间选择器组件

我就是我 2023-06-15 06:43 62阅读 0赞

# uni-app组件开发----多粒度时间选择器组件 #

本文链接：[https://blog.csdn.net/m0\_38082783/article/details/88692210][https_blog.csdn.net_m0_38082783_article_details_88692210]

\#\#\#WXRUI体验二维码  
![WXRUI体验码][WXRUI]

如果本插件对你的开发有帮助，请进入小程序，点击一下广告，谢谢支持！

### 下载 ###

[DatePicker 多粒度时间选择器组件下载][DatePicker]

### DatePicker 多粒度时间选择器 ###

可进行多粒度时间选择器，组件名：`rattenking-dtpicker`，代码块： ruiDatePicker。

**使用方式：**

在 `script` 中引用组件

import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
    export default {
        components: {ruiDatePicker}
    }

*  1
 *  2
 *  3
 *  4

在 `template` 中使用组件

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

实际效果参考：[https://github.com/Rattenking/rui-uni-components][https_github.com_Rattenking_rui-uni-components]

**DatePicker 属性说明：**

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

**fields 值说明：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>year</td> 
   <td>String</td> 
   <td>选择器粒度为年</td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>String</td> 
   <td>选择器粒度为月份</td> 
  </tr> 
  <tr> 
   <td>day</td> 
   <td>String</td> 
   <td>选择器粒度为天</td> 
  </tr> 
  <tr> 
   <td>hour</td> 
   <td>String</td> 
   <td>选择器粒度为小时</td> 
  </tr> 
  <tr> 
   <td>minute</td> 
   <td>String</td> 
   <td>选择器粒度为分钟</td> 
  </tr> 
  <tr> 
   <td>second</td> 
   <td>String</td> 
   <td>选择器粒度为秒</td> 
  </tr> 
 </tbody> 
</table>

**事件说明：**

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>时间选择器点击【确定】按钮时时触发的事件，参数为picker的当前的 value</td> 
  </tr> 
  <tr> 
   <td>cancel</td> 
   <td>时间选择器点击【取消】按钮时时触发的事件</td> 
  </tr> 
 </tbody> 
</table>

### 下载 ###

[DatePicker 多时间粒度选择器组件下载][DatePicker]

\#\#\#WXRUI体验二维码  
![WXRUI体验码][WXRUI]

如果本插件对你的开发有帮助，请进入小程序，点击一下广告，谢谢支持！

[https_blog.csdn.net_m0_38082783_article_details_88692210]: https://blog.csdn.net/m0_38082783/article/details/88692210
[WXRUI]: https://img-blog.csdnimg.cn/20190220140113256.jpg
[DatePicker]: https://ext.dcloud.net.cn/plugin?id=220
[https_github.com_Rattenking_rui-uni-components]: https://github.com/Rattenking/rui-uni-components