zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

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

App组件开发 时间 ---- 选择器 uni
2023-09-14 09:15:08 时间

###WXRUI体验二维码
WXRUI体验码

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

下载

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

DatePicker 多粒度时间选择器

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

使用方式:

script 中引用组件

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

template 中使用组件

<ruiDatePicker
	fields="second"
	start="2010-00-00 00:00:00"
	end="2030-12-30 23:59:59"
	:value="value"
	@change="bindChange"
	@cancel="bindCancel"
></ruiDatePicker>

实际效果参考:https://github.com/Rattenking/rui-uni-components

DatePicker 属性说明:

属性名类型默认值说明
startString‘1900-00-00 00:00:00’限制选择器选择的最小时间
endString‘2500-12-30 23:59:59’限制选择器选择的最大时间
valueString‘2019-03-15 10:45:00’当前时间选择器显示的时间
fieldsString‘second’时间选择器的粒度
disabledBooleanfalse是否为禁用状态

fields 值说明:

类型说明
yearString选择器粒度为年
monthString选择器粒度为月份
dayString选择器粒度为天
hourString选择器粒度为小时
minuteString选择器粒度为分钟
secondString选择器粒度为秒

事件说明:

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

下载

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

###WXRUI体验二维码
WXRUI体验码

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