DateTime 时间选择器

此选择器是时间选择器，可以配置年，月，日，时，季度参数

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

show控制组件是否显示

theme控制适老化模式

mode控制是否为范围选择 可选项 time 和 timerange

types ['minute', 'hour', 'day', 'month', 'quarter', 'halfyear', 'year'] 控制tab的选项,默认不显示minute

type 控制当前的选项

value 如果是单选时间返回字符串，如果是范围选择，返回数组。

disabledDate 控制不可选的范围

<u-date-time-group-picker
	:theme="theme" :isWeekIso="true" v-model="value" :show="show"
 	:mode="mode" :disabledDate="disabledDate" 
	@onPickerConfirm="onPickerConfirm" @onPickerCancel="onPickerCancel"
	:types="types" :type="type"
/>

export default {
    data() {
        return {
            show: false,
            theme: 'normal',
            mode: "timerange",
            types: ['minute',
                'hour',
                'day',
                'month',
                'quarter',
                'year'],
            type: 'minute',
            value: [new Date(), new Date()],
            disabledDate: date => {
                return date > new Date();
            }
        };
    },
	methods: {
		onPickerConfirm(e, typeSelected) {
            console.log(e);
            console.log(typeSelected);
            this.show = false;
        },
        onPickerCancel(e) {
            console.log(e);
            this.show = false;
		}
	}
}

Attributes

参数	说明	类型	可选值	默认值
mode	组件模式	string	time、timerange（范围选择）	time
textColor	时间列表文字颜色	string	-	rgba(7, 196, 212, 1)
textSelectedColor	时间列表已选文字颜色	string	-	rgba(38, 50, 56, 1)
itemHeight	每一行高度	Number	-	48
startYear	开始年	Number	-	1990
endYear	结束年	Number	-	new Date().getFullYear()
disabledDate	禁用时间Function(date)，返回Boolean	Function	-	null
confirmText	'确定', 文字	string	-	确定
cancelText	'取消', 文字	string	-	取消
rangeSeparator	时间段连接符号	string	-	'至'
value	初始值	date / [date,date]	-	date(time)
type	时间类型	string	'minute', 'hour','day','week','month','quarter', ''halfyear'', 'year'	'hour'
types	允许选择的时间类型	Object[]	['minute', 'hour','day','week','month','quarter', ''halfyear'', 'year']	['hour','day','week','month','quarter', ''halfyear'', 'year']
isWeekIso	是否是ISO标准的周定义	string	false	true
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	true	false
mask-click-able	遮罩是否可点击，为false时点击不会关闭	Boolean	true	false
appendToBody	dateTime 自身是否插入至 body 元素上。嵌套的 dateTime 必须指定该属性并赋值为 true	String	"1"	"0"

methods

属性	描述	示例
onPickerConfirm	时间选择确认回调	(value,type) => {}
onPickerCancel	时间选择取消回调	() => {}
onChangeTab	时间类型切换回调	(type) => {}