ai.touchui-vue 1.30.2 → 1.30.4

package/packages/date-picker/src/date-picker.vue

@@ -1,432 +1,436 @@
-<template>
-	<to-input
-		:id="id"
-		ref="inputBox"
-		class="to-date-picker"
-		:required="required"
-		:desc="desc"
-		:color="color"
-		:prefix="prefix"
-		:suffix="suffix"
-		:mode="mode"
-		:prop-error-type="errorType"
-		:prop-error-tip="errorTip"
-		:fillet="fillet"
-		:fillet-position="filletPosition"
-		:value="datedisplay"
-		:placeholder="placeholder"
-		:readonly="disabled || !inputable"
-		:sp-chars="spChars"
-		:link="!inputable && !disabled"
-		:clearable="clearable && !disabled"
-		:width="width"
-		:comparable="comparable"
-		@focus="errorTip = ''"
-		@click="handleClick"
-		@clear="clear()"
-		@input="handleDisplayChange"
-		@blur="handleDisplayBlur"
-		>
-		<to-icon v-if="type === 'time'" slot="suffix" :link="inputable" :class="disabled?'to-dis':''" mode="none" color="primary" value="time" @click="showLayer"></to-icon>
-		<to-icon v-else slot="suffix" :link="inputable" :class="disabled?'to-dis':''" mode="none" color="primary" value="date" @click="showLayer"></to-icon>
-		<to-float ref="layer" :lazy="lazy" :slide="layerSlide" :position="layerPosition" :paddng="0.5" :width="$platform === 'pc' ? 23 : ''" :align="optionAlign ? optionAlign : $pc ? 'right' : 'auto'" @close="handleLayerClose">
-			<to-scroll v-if="$pc || showCalendar">
-				<to-calendar ref="calendar" v-model="date" :time="time" :type="type" :min="min" :max="max" :before-change="beforeChange" @change="select" @close="$refs.layer.close()"></to-calendar>
-			</to-scroll>
-			<picker v-else v-model="date" :time="time" :type="type" :min="min" :max="max" @cancel="$refs.layer.close()" @change="select" @clear="clear()"></picker>
-		</to-float>
-	</to-input>
-</template>
-<script>
-import { t } from 'ai.touchui-vue/src/locale';
-import Tip from 'ai.touchui-vue/src/mixins/tip'
-import picker from './picker'
-export default {
-	name: 'ToDatePicker',
-	components: {picker},
-	mixins: [Tip],
-	componentName: 'ToDatePicker',
-	model: {
-		event: 'change'
-	},
-	props: {
-		suffix: {
-			type: String,
-			default: ''
-		},
-		prefix: {
-			type: String,
-			default: ''
-		},
-		showCalendar: {
-			type: Boolean,
-			default: false
-		},
-		lazy: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI && this.$TouchUI.datePicker && this.$TouchUI.datePicker.lazy === false) {
-					return false
-				} else {
-					return true
-				}
-			}
-		},
-		desc: {
-			type: String,
-			default: ''
-		},
-		// 安全
-		spChars: {
-			type: [String, Boolean],
-			default: '/,\\,[,],{,},"' // 微软拼音输入法使用单引号做上屏前多个字符分隔符，不能过滤单引号
-		},
-		id: {
-			type: String,
-			default: ''
-		},
-		required: {
-			type: Boolean,
-			default: null
-		},
-		value: {
-			type: [String, Date],
-			default: ''
-		},
-		placeholder: {
-			type: String,
-			default() {
-				if (this.inputable) {
-					return t('to.common.placeholder.select')
-				} else {
-					return t('to.common.placeholder.select')
-				}
-			}
-		},
-		readonly: Boolean,
-		inputable: {
-			type: Boolean,
-			default: true
-		},
-		type: {
-			type: String,
-			default: ''
-		},
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.datePicker.fillet || this.$TouchUI.global.fillet || 'normal'
-			}
-		},
-		filletPosition: {
-			type: String,
-			default: ''
-		},
-		color: {
-			type: String,
-			default: 'default'
-		},
-		mode: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		valueFormat: {
-			type: String,
-			default() {
-				if (this.type === 'datetime') {
-					return 'yyyy-MM-dd HH:mm:ss'
-				} else if (this.type === 'time') {
-					return 'HH:mm:ss'
-				} else if (this.type === 'month') {
-					return 'yyyy-MM'
-				} else {
-					return 'yyyy-MM-dd'
-				}
-			}
-		},
-		displayFormat: {
-			type: String,
-			default() {
-				if (this.type === 'datetime') {
-					return 'yyyy-MM-dd HH:mm:ss'
-				} else if (this.type === 'month') {
-					return 'yyyy-MM'
-				} else {
-					return 'yyyy-MM-dd'
-				}
-			}
-		},
-		time: {
-			type: String,
-			default: ''
-		},
-		comparable: Boolean,
-		beforeChange: {
-			type: Function,
-			default: null
-		},
-		optionAlign: {
-			type: String,
-			default: ''
-		},
-		min: {
-			type: [String, Date, Number],
-			default: ''
-		},
-		max: {
-			type: [String, Date, Number],
-			default: ''
-		},
-		clearable: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			errorType: 'rule',
-			errorTip: '',
-			date: '',
-			iValue: '',
-			datedisplay: '',
-			layerSlide: false,
-			displayFormatRegExp: '',
-			layerPosition: 'auto',
-			disabled: this.readonly
-		};
-	},
-	watch: {
-		readonly(val) {
-			this.disabled = val
-		},
-		value: {
-			handler(val) {
-				if (val === '') {
-					this.date = ''
-					this.datedisplay = ''
-				} else {
-					if (this.type === 'time') {
-						this.date = this.getDateFromValue(val, 'yyyy-MM-dd HH:mm:ss')
-						this.datedisplay = val
-					} else {
-						val = this.getDateFromValue(val, this.valueFormat)
-						this.date = val
-						this.datedisplay = this.formatDate(val, this.displayFormat)
-					}
-				}
-			},
-			immediate: true
-		},
-		displayFormat: {
-			handler(fmt) {
-				this.displayFormatRegExp = new RegExp(`^${String(fmt).replace(/\-|\//g, '\\-').replace(/[a-zA-Z]/g, '\\d')}$`)
-			},
-			immediate: true
-		}
-	},
-	created() {
-		if (this.$platform === 'phone') {
-			this.layerSlide = true
-			this.layerPosition = 'bottom'
-		}
-		if (this.value) {
-			this.iValue = this.value
-			this.$emit('change', this.value)
-		}
-	},
-	mounted() {
-		// this.$refs.layer.open()
-	},
-	methods: {
-		handleLayerClose() {
-			this.$refs.calendar.timeLayer = false
-			this.$refs.calendar.monthLayer = false
-		},
-		handleDisplayChange(value) {
-			this.datedisplay = value
-			this.$emit('change', this.datedisplay)
-		},
-		handleDisplayBlur() {
-			setTimeout(() => {
-				if (isNaN(new Date(this.datedisplay))) {
-					this.datedisplay = ''
-					this.changeValue('')
-				} else {
-					this.$emit('beforeChange', this.datedisplay)
-					if (!this.displayFormatRegExp.test(this.datedisplay)) {
-						this.datedisplay = this.formatDate(new Date(this.datedisplay), this.displayFormat)
-						this.iValue = this.formatDate(new Date(this.datedisplay), this.displayFormat)
-						this.$emit('change', this.iValue)
-					} else {
-						this.changeValue(this.getDateFromValue(this.datedisplay, this.displayFormat))
-					}
-				}
-			}, 100);
-		},
-		select(value) {
-			this.changeValue(value)
-			this.$refs.layer.close()
-		},
-		changeValue(value) {
-			this.$emit('beforeChange', value)
-			if (!value) {
-				this.clear()
-			} else if (this.type === 'time') {
-				if (typeof value === 'string') {
-					this.datedisplay = value.split(' ').length > 1 ? value.split(' ')[1] : value
-					this.iValue = value.split(' ').length > 1 ? value.split(' ')[1] : value
-				} else {
-					value = this.formatDate(new Date(value), 'yyyy-MM-dd HH:mm:ss')
-					const flag = isNaN(new Date(value).getTime()) // 判断是否可以使用 2022-05 如果不可用，则替换为 2022/05
-					if (flag) {
-						value = value.replace(/-/g, '/')
-					}
-					this.datedisplay = value.split(' ').length > 1 ? value.split(' ')[1] : value
-					this.iValue = value.split(' ').length > 1 ? value.split(' ')[1] : value
-				}
-				this.$emit('change', this.iValue)
-			} else {
-				const flag = isNaN(new Date(value).getTime()) // 判断是否可以使用 2022-05 如果不可用，则替换为 2022/05
-				if (flag) {
-					value = value.replace(/-/g, '/')
-				}
-				this.datedisplay = this.formatDate(new Date(value), this.displayFormat)
-				this.iValue = this.formatDate(new Date(value), this.valueFormat)
-				this.$emit('change', this.iValue)
-			}
-		},
-		clear() {
-			const oldVal = this.iValue // 失去焦点时原本就是空的情况不应该 change
-			this.iValue = ''
-			if (oldVal) {
-				this.$emit('change', this.iValue)
-			}
-			if (!this.$pc) {
-				this.$refs.layer.close()
-			}
-		},
-		addZero(str) {
-			return ('00' + str).substr(str.toString().length);
-		},
-		handleClick() {
-			if (!this.readonly && !this.inputable) {
-				this.showLayer()
-			}
-		},
-		showLayer() {
-			// 如果 v-dis 为 true，避免在 IE11 下 v-dis 不生效
-			let className = this.$refs.inputBox && this.$refs.inputBox.$el && this.$refs.inputBox.$el.className || ''
-
-			// 表单校验的提示清除
-			this.errorTip = this.$refs.inputBox.errorTip = ''
-			if (className.indexOf('to-dis') > -1) {
-				return
-			}
-			if (!this.disabled) {
-				this.$refs.layer.toggle('inputBox')
-				this.$nextTick(function() {
-					if (this.$refs.calendar) {
-						this.$refs.calendar.initCalendar()
-						this.$refs.calendar.setData()
-					}
-				})
-			}
-		},
-		getDateFromValue(value, format = 'yyyy-MM-dd') {
-			if (!value) return
-			if (typeof value === 'string') {
-				const date = new Date()
-				let day
-				if (this.type === 'month') {
-					day = 1
-				} else {
-					day = this.getDateStrFromMatch(/d+/, value, format) || this.addZero(date.getDate())
-				}
-				let datearr = [
-					this.getDateStrFromMatch(/y+/, value, format) || date.getFullYear(),
-					this.getDateStrFromMatch(/M+/, value, format) || this.addZero(date.getMonth() + 1),
-					day
-				]
-				let timearr = [
-					this.getDateStrFromMatch(/H+|h+/, value, format) || this.addZero(date.getHours()),
-					this.getDateStrFromMatch(/m+/, value, format) || this.addZero(date.getMinutes()),
-					this.getDateStrFromMatch(/s+/, value, format) || this.addZero(date.getSeconds())
-				]
-				if (this.type === 'time') {
-					datearr = [
-						date.getFullYear(),
-						this.addZero(date.getMonth() + 1),
-						this.addZero(date.getDate())
-					]
-					let times = value.split(':')
-					timearr = [
-						times[0] || this.addZero(date.getHours()),
-						times[1] || this.addZero(date.getMinutes()),
-						times[2] || this.addZero(date.getSeconds())
-					]
-				}
-				value = new Date(`${datearr.join('/')} ${timearr.join(':')}`)
-			}
-			return value
-			// 值补齐
-			// var date = new Date()
-			// dateformat = dateformat.replace(/y+/g, )
-			// dateformat = dateformat.replace(/M+/g, )
-			// dateformat = dateformat.replace(/d+/g, ))
-			// dateformat = dateformat.replace(/(h+)|(H+)/g,))
-			// dateformat = dateformat.replace(/m+/g, ))
-			// dateformat = dateformat.replace(/s+/g, ))
-		},
-		getDateStrFromMatch(regExp, value = '', format = 'yyyy-MM-dd') {
-			const yMatch = format.match(regExp)
-			if (!yMatch) return
-			return value.substr(yMatch.index, yMatch[0].length)
-		},
-		formatDate(date, fmt) {
-			if (date) {
-				if (!fmt) {
-					if (this.type === 'datetime') {
-						fmt = 'yyyy-MM-dd HH:mm:ss'
-					}	else if (this.type === 'time') {
-						fmt = 'HH:mm:ss'
-					} else {
-						fmt = 'yyyy-MM-dd'
-					}
-				}
-				if (/(y+)/.test(fmt)) {
-					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-				}
-				const o = {
-					'M+': date.getMonth() + 1,
-					'd+': date.getDate(),
-					'H+': date.getHours(),
-					'm+': date.getMinutes(),
-					's+': date.getSeconds()
-				};
-				for (const k in o) {
-					if (new RegExp('(' + k + ')').test(fmt)) {
-						const str = o[k] + '';
-						fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.addZero(str));
-					}
-				}
-				return fmt;
-			} else {
-				return ''
-			}
-		},
-		setDisabled(f) {
-			this.disabled = f
-		}
-	}
-};
-</script>
-
-<style>
-.to-date-picker.to-dis>.to-icon-date {
-	pointer-events: none;
-}
-</style>
+<template>
+	<to-input
+		:id="id"
+		ref="inputBox"
+		class="to-date-picker"
+		:required="required"
+		:desc="desc"
+		:color="color"
+		:prefix="prefix"
+		:suffix="suffix"
+		:mode="mode"
+		:prop-error-type="errorType"
+		:prop-error-tip="errorTip"
+		:fillet="fillet"
+		:fillet-position="filletPosition"
+		:value="datedisplay"
+		:placeholder="placeholder"
+		:readonly="disabled || !inputable"
+		:sp-chars="spChars"
+		:link="!inputable && !disabled"
+		:clearable="clearable && !disabled"
+		:width="width"
+		:comparable="comparable"
+		@focus="errorTip = ''"
+		@click="handleClick"
+		@clear="clear()"
+		@input="handleDisplayChange"
+		@blur="handleDisplayBlur"
+		>
+		<to-icon v-if="type === 'time'" slot="suffix" :link="inputable" :class="disabled?'to-dis':''" mode="none" color="primary" value="time" @click="showLayer"></to-icon>
+		<to-icon v-else slot="suffix" :link="inputable" :class="disabled?'to-dis':''" mode="none" color="primary" value="date" @click="showLayer"></to-icon>
+		<to-float ref="layer" :lazy="lazy" :slide="layerSlide" :position="layerPosition" :paddng="0.5" :width="$platform === 'pc' ? 23 : ''" :align="optionAlign ? optionAlign : $pc ? 'right' : 'auto'" @close="handleLayerClose">
+			<to-scroll v-if="$pc || showCalendar">
+				<to-calendar ref="calendar" v-model="date" :time="time" :type="type" :min="min" :max="max" :before-change="beforeChange" @change="select" @close="$refs.layer.close()"></to-calendar>
+			</to-scroll>
+			<picker v-else v-model="date" :time="time" :type="type" :min="min" :max="max" @cancel="$refs.layer.close()" @change="select" @clear="clear()"></picker>
+		</to-float>
+	</to-input>
+</template>
+<script>
+import { t } from 'ai.touchui-vue/src/locale';
+import Tip from 'ai.touchui-vue/src/mixins/tip'
+import picker from './picker'
+import moment from 'moment';
+export default {
+	name: 'ToDatePicker',
+	components: {picker},
+	mixins: [Tip],
+	componentName: 'ToDatePicker',
+	model: {
+		event: 'change'
+	},
+	props: {
+		suffix: {
+			type: String,
+			default: ''
+		},
+		prefix: {
+			type: String,
+			default: ''
+		},
+		showCalendar: {
+			type: Boolean,
+			default: false
+		},
+		lazy: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI && this.$TouchUI.datePicker && this.$TouchUI.datePicker.lazy === false) {
+					return false
+				} else {
+					return true
+				}
+			}
+		},
+		desc: {
+			type: String,
+			default: ''
+		},
+		// 安全
+		spChars: {
+			type: [String, Boolean],
+			default: '/,\\,[,],{,},"' // 微软拼音输入法使用单引号做上屏前多个字符分隔符，不能过滤单引号
+		},
+		id: {
+			type: String,
+			default: ''
+		},
+		required: {
+			type: Boolean,
+			default: null
+		},
+		value: {
+			type: [String, Date],
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default() {
+				if (this.inputable) {
+					return t('to.common.placeholder.select')
+				} else {
+					return t('to.common.placeholder.select')
+				}
+			}
+		},
+		readonly: Boolean,
+		inputable: {
+			type: Boolean,
+			default: true
+		},
+		type: {
+			type: String,
+			default: ''
+		},
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.datePicker.fillet || this.$TouchUI.global.fillet || 'normal'
+			}
+		},
+		filletPosition: {
+			type: String,
+			default: ''
+		},
+		color: {
+			type: String,
+			default: 'default'
+		},
+		mode: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		valueFormat: {
+			type: String,
+			default() {
+				if (this.type === 'datetime') {
+					return 'yyyy-MM-dd HH:mm:ss'
+				} else if (this.type === 'time') {
+					return 'HH:mm:ss'
+				} else if (this.type === 'month') {
+					return 'yyyy-MM'
+				} else {
+					return 'yyyy-MM-dd'
+				}
+			}
+		},
+		displayFormat: {
+			type: String,
+			default() {
+				if (this.type === 'datetime') {
+					return 'yyyy-MM-dd HH:mm:ss'
+				} else if (this.type === 'month') {
+					return 'yyyy-MM'
+				} else {
+					return 'yyyy-MM-dd'
+				}
+			}
+		},
+		time: {
+			type: String,
+			default: ''
+		},
+		comparable: Boolean,
+		beforeChange: {
+			type: Function,
+			default: null
+		},
+		optionAlign: {
+			type: String,
+			default: ''
+		},
+		min: {
+			type: [String, Date, Number],
+			default: ''
+		},
+		max: {
+			type: [String, Date, Number],
+			default: ''
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			errorType: 'rule',
+			errorTip: '',
+			date: '',
+			iValue: '',
+			datedisplay: '',
+			layerSlide: false,
+			displayFormatRegExp: '',
+			layerPosition: 'auto',
+			disabled: this.readonly
+		};
+	},
+	watch: {
+		readonly(val) {
+			this.disabled = val
+		},
+		value: {
+			handler(val) {
+				if (val === '') {
+					this.date = ''
+					this.datedisplay = ''
+				} else {
+					// 检查数据是否和 valueFormat 相匹配，避免报错
+					const flag = moment(val, this.valueFormat, true).isValid();
+					if (!flag) { return }
+					if (this.type === 'time') {
+						this.date = this.getDateFromValue(val, 'yyyy-MM-dd HH:mm:ss')
+						this.datedisplay = val
+					} else {
+						val = this.getDateFromValue(val, this.valueFormat)
+						this.date = val
+						this.datedisplay = this.formatDate(val, this.displayFormat)
+					}
+				}
+			},
+			immediate: true
+		},
+		displayFormat: {
+			handler(fmt) {
+				this.displayFormatRegExp = new RegExp(`^${String(fmt).replace(/\-|\//g, '\\-').replace(/[a-zA-Z]/g, '\\d')}$`)
+			},
+			immediate: true
+		}
+	},
+	created() {
+		if (this.$platform === 'phone') {
+			this.layerSlide = true
+			this.layerPosition = 'bottom'
+		}
+		if (this.value) {
+			this.iValue = this.value
+			this.$emit('change', this.value)
+		}
+	},
+	mounted() {
+		// this.$refs.layer.open()
+	},
+	methods: {
+		handleLayerClose() {
+			this.$refs.calendar.timeLayer = false
+			this.$refs.calendar.monthLayer = false
+		},
+		handleDisplayChange(value) {
+			this.datedisplay = value
+			this.$emit('change', this.datedisplay)
+		},
+		handleDisplayBlur() {
+			setTimeout(() => {
+				if (isNaN(new Date(this.datedisplay))) {
+					this.datedisplay = ''
+					this.changeValue('')
+				} else {
+					this.$emit('beforeChange', this.datedisplay)
+					if (!this.displayFormatRegExp.test(this.datedisplay)) {
+						this.datedisplay = this.formatDate(new Date(this.datedisplay), this.displayFormat)
+						this.iValue = this.formatDate(new Date(this.datedisplay), this.displayFormat)
+						this.$emit('change', this.iValue)
+					} else {
+						this.changeValue(this.getDateFromValue(this.datedisplay, this.displayFormat))
+					}
+				}
+			}, 100);
+		},
+		select(value) {
+			this.changeValue(value)
+			this.$refs.layer.close()
+		},
+		changeValue(value) {
+			this.$emit('beforeChange', value)
+			if (!value) {
+				this.clear()
+			} else if (this.type === 'time') {
+				if (typeof value === 'string') {
+					this.datedisplay = value.split(' ').length > 1 ? value.split(' ')[1] : value
+					this.iValue = value.split(' ').length > 1 ? value.split(' ')[1] : value
+				} else {
+					value = this.formatDate(new Date(value), 'yyyy-MM-dd HH:mm:ss')
+					const flag = isNaN(new Date(value).getTime()) // 判断是否可以使用 2022-05 如果不可用，则替换为 2022/05
+					if (flag) {
+						value = value.replace(/-/g, '/')
+					}
+					this.datedisplay = value.split(' ').length > 1 ? value.split(' ')[1] : value
+					this.iValue = value.split(' ').length > 1 ? value.split(' ')[1] : value
+				}
+				this.$emit('change', this.iValue)
+			} else {
+				const flag = isNaN(new Date(value).getTime()) // 判断是否可以使用 2022-05 如果不可用，则替换为 2022/05
+				if (flag) {
+					value = value.replace(/-/g, '/')
+				}
+				this.datedisplay = this.formatDate(new Date(value), this.displayFormat)
+				this.iValue = this.formatDate(new Date(value), this.valueFormat)
+				this.$emit('change', this.iValue)
+			}
+		},
+		clear() {
+			const oldVal = this.iValue // 失去焦点时原本就是空的情况不应该 change
+			this.iValue = ''
+			if (oldVal) {
+				this.$emit('change', this.iValue)
+			}
+			if (!this.$pc) {
+				this.$refs.layer.close()
+			}
+		},
+		addZero(str) {
+			return ('00' + str).substr(str.toString().length);
+		},
+		handleClick() {
+			if (!this.readonly && !this.inputable) {
+				this.showLayer()
+			}
+		},
+		showLayer() {
+			// 如果 v-dis 为 true，避免在 IE11 下 v-dis 不生效
+			let className = this.$refs.inputBox && this.$refs.inputBox.$el && this.$refs.inputBox.$el.className || ''
+
+			// 表单校验的提示清除
+			this.errorTip = this.$refs.inputBox.errorTip = ''
+			if (className.indexOf('to-dis') > -1) {
+				return
+			}
+			if (!this.disabled) {
+				this.$refs.layer.toggle('inputBox')
+				this.$nextTick(function() {
+					if (this.$refs.calendar) {
+						this.$refs.calendar.initCalendar()
+						this.$refs.calendar.setData()
+					}
+				})
+			}
+		},
+		getDateFromValue(value, format = 'yyyy-MM-dd') {
+			if (!value) return
+			if (typeof value === 'string') {
+				const date = new Date()
+				let day
+				if (this.type === 'month') {
+					day = 1
+				} else {
+					day = this.getDateStrFromMatch(/d+/, value, format) || this.addZero(date.getDate())
+				}
+				let datearr = [
+					this.getDateStrFromMatch(/y+/, value, format) || date.getFullYear(),
+					this.getDateStrFromMatch(/M+/, value, format) || this.addZero(date.getMonth() + 1),
+					day
+				]
+				let timearr = [
+					this.getDateStrFromMatch(/H+|h+/, value, format) || this.addZero(date.getHours()),
+					this.getDateStrFromMatch(/m+/, value, format) || this.addZero(date.getMinutes()),
+					this.getDateStrFromMatch(/s+/, value, format) || this.addZero(date.getSeconds())
+				]
+				if (this.type === 'time') {
+					datearr = [
+						date.getFullYear(),
+						this.addZero(date.getMonth() + 1),
+						this.addZero(date.getDate())
+					]
+					let times = value.split(':')
+					timearr = [
+						times[0] || this.addZero(date.getHours()),
+						times[1] || this.addZero(date.getMinutes()),
+						times[2] || this.addZero(date.getSeconds())
+					]
+				}
+				value = new Date(`${datearr.join('/')} ${timearr.join(':')}`)
+			}
+			return value
+			// 值补齐
+			// var date = new Date()
+			// dateformat = dateformat.replace(/y+/g, )
+			// dateformat = dateformat.replace(/M+/g, )
+			// dateformat = dateformat.replace(/d+/g, ))
+			// dateformat = dateformat.replace(/(h+)|(H+)/g,))
+			// dateformat = dateformat.replace(/m+/g, ))
+			// dateformat = dateformat.replace(/s+/g, ))
+		},
+		getDateStrFromMatch(regExp, value = '', format = 'yyyy-MM-dd') {
+			const yMatch = format.match(regExp)
+			if (!yMatch) return
+			return value.substr(yMatch.index, yMatch[0].length)
+		},
+		formatDate(date, fmt) {
+			if (date) {
+				if (!fmt) {
+					if (this.type === 'datetime') {
+						fmt = 'yyyy-MM-dd HH:mm:ss'
+					}	else if (this.type === 'time') {
+						fmt = 'HH:mm:ss'
+					} else {
+						fmt = 'yyyy-MM-dd'
+					}
+				}
+				if (/(y+)/.test(fmt)) {
+					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+				}
+				const o = {
+					'M+': date.getMonth() + 1,
+					'd+': date.getDate(),
+					'H+': date.getHours(),
+					'm+': date.getMinutes(),
+					's+': date.getSeconds()
+				};
+				for (const k in o) {
+					if (new RegExp('(' + k + ')').test(fmt)) {
+						const str = o[k] + '';
+						fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.addZero(str));
+					}
+				}
+				return fmt;
+			} else {
+				return ''
+			}
+		},
+		setDisabled(f) {
+			this.disabled = f
+		}
+	}
+};
+</script>
+
+<style>
+.to-date-picker.to-dis>.to-icon-date {
+	pointer-events: none;
+}
+</style>