cy-element-ui 1.0.3 → 1.0.5

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

@@ -15,7 +15,7 @@
 						class="el-picker-panel__shortcut"
 						v-for="(shortcut, key) in shortcuts"
 						:key="key"
-						@click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+						@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
 				</div>
 				<div class="el-picker-panel__body">
 					<div class="el-date-range-picker__time-header" v-if="showTime">
@@ -188,493 +188,493 @@
 </template>
 
 <script type="text/babel">
-	import {
-		formatDate,
-		parseDate,
-		isDate,
-		modifyDate,
-		modifyTime,
-		modifyWithTimeString,
-		prevYear,
-		nextYear,
-		prevMonth,
-		nextMonth,
-		nextDate,
-		extractDateFormat,
-		extractTimeFormat
-	} from 'element-ui/src/utils/date-util';
-	import Clickoutside from 'element-ui/src/utils/clickoutside';
-	import Locale from 'element-ui/src/mixins/locale';
-	import TimePicker from './time';
-	import DateTable from '../basic/date-table';
-	import ElInput from 'element-ui/packages/input';
-	import ElButton from 'element-ui/packages/button';
-
-	const calcDefaultValue = (defaultValue) => {
-		if (Array.isArray(defaultValue)) {
-			return [new Date(defaultValue[0]), new Date(defaultValue[1])];
-		} else if (defaultValue) {
-			return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];
-		} else {
-			return [new Date(), nextDate(new Date(), 1)];
-		}
-	};
-
-	export default {
-		mixins: [Locale],
+import {
+	formatDate,
+	parseDate,
+	isDate,
+	modifyDate,
+	modifyTime,
+	modifyWithTimeString,
+	prevYear,
+	nextYear,
+	prevMonth,
+	nextMonth,
+	nextDate,
+	extractDateFormat,
+	extractTimeFormat
+} from 'element-ui/src/utils/date-util';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import Locale from 'element-ui/src/mixins/locale';
+import TimePicker from './time';
+import DateTable from '../basic/date-table';
+import ElInput from 'element-ui/packages/input';
+import ElButton from 'element-ui/packages/button';
+
+const calcDefaultValue = (defaultValue) => {
+	if (Array.isArray(defaultValue)) {
+		return [new Date(defaultValue[0]), new Date(defaultValue[1])];
+	} else if (defaultValue) {
+		return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];
+	} else {
+		return [new Date(), nextDate(new Date(), 1)];
+	}
+};
+
+export default {
+	mixins: [Locale],
+
+	directives: { Clickoutside },
+
+	computed: {
+		btnDisabled() {
+			return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));
+		},
 
-		directives: { Clickoutside },
+		leftLabel() {
+			return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.leftDate.getMonth() + 1 }`);
+		},
 
-		computed: {
-			btnDisabled() {
-				return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));
-			},
+		rightLabel() {
+			return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.rightDate.getMonth() + 1 }`);
+		},
 
-			leftLabel() {
-				return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.leftDate.getMonth() + 1 }`);
-			},
+		leftYear() {
+			return this.leftDate.getFullYear();
+		},
 
-			rightLabel() {
-				return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.rightDate.getMonth() + 1 }`);
-			},
+		leftMonth() {
+			return this.leftDate.getMonth();
+		},
 
-			leftYear() {
-				return this.leftDate.getFullYear();
-			},
+		leftMonthDate() {
+			return this.leftDate.getDate();
+		},
 
-			leftMonth() {
-				return this.leftDate.getMonth();
-			},
+		rightYear() {
+			return this.rightDate.getFullYear();
+		},
 
-			leftMonthDate() {
-				return this.leftDate.getDate();
-			},
+		rightMonth() {
+			return this.rightDate.getMonth();
+		},
 
-			rightYear() {
-				return this.rightDate.getFullYear();
-			},
+		rightMonthDate() {
+			return this.rightDate.getDate();
+		},
 
-			rightMonth() {
-				return this.rightDate.getMonth();
-			},
+		minVisibleDate() {
+			if (this.dateUserInput.min !== null) return this.dateUserInput.min;
+			if (this.minDate) return formatDate(this.minDate, this.dateFormat);
+			return '';
+		},
 
-			rightMonthDate() {
-				return this.rightDate.getDate();
-			},
+		maxVisibleDate() {
+			if (this.dateUserInput.max !== null) return this.dateUserInput.max;
+			if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat);
+			return '';
+		},
 
-			minVisibleDate() {
-				if (this.dateUserInput.min !== null) return this.dateUserInput.min;
-				if (this.minDate) return formatDate(this.minDate, this.dateFormat);
-				return '';
-			},
+		minVisibleTime() {
+			if (this.timeUserInput.min !== null) return this.timeUserInput.min;
+			if (this.minDate) return formatDate(this.minDate, this.timeFormat);
+			return '';
+		},
 
-			maxVisibleDate() {
-				if (this.dateUserInput.max !== null) return this.dateUserInput.max;
-				if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat);
-				return '';
-			},
+		maxVisibleTime() {
+			if (this.timeUserInput.max !== null) return this.timeUserInput.max;
+			if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat);
+			return '';
+		},
 
-			minVisibleTime() {
-				if (this.timeUserInput.min !== null) return this.timeUserInput.min;
-				if (this.minDate) return formatDate(this.minDate, this.timeFormat);
-				return '';
-			},
+		timeFormat() {
+			if (this.format) {
+				return extractTimeFormat(this.format);
+			} else {
+				return 'HH:mm:ss';
+			}
+		},
 
-			maxVisibleTime() {
-				if (this.timeUserInput.max !== null) return this.timeUserInput.max;
-				if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat);
-				return '';
-			},
+		dateFormat() {
+			if (this.format) {
+				return extractDateFormat(this.format);
+			} else {
+				return 'yyyy-MM-dd';
+			}
+		},
 
-			timeFormat() {
-				if (this.format) {
-					return extractTimeFormat(this.format);
-				} else {
-					return 'HH:mm:ss';
-				}
-			},
+		enableMonthArrow() {
+			const nextMonth = (this.leftMonth + 1) % 12;
+			const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0;
+			return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth);
+		},
 
-			dateFormat() {
-				if (this.format) {
-					return extractDateFormat(this.format);
-				} else {
-					return 'yyyy-MM-dd';
+		enableYearArrow() {
+			return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12;
+		}
+	},
+
+	data() {
+		return {
+			popperClass: '',
+			value: [],
+			defaultValue: null,
+			defaultTime: null,
+			minDate: '',
+			maxDate: '',
+			leftDate: new Date(),
+			rightDate: nextMonth(new Date()),
+			rangeState: {
+				endDate: null,
+				selecting: false,
+				row: null,
+				column: null
+			},
+			showTime: false,
+			shortcuts: '',
+			visible: '',
+			disabledDate: '',
+			cellClassName: '',
+			firstDayOfWeek: 7,
+			minTimePickerVisible: false,
+			maxTimePickerVisible: false,
+			format: '',
+			arrowControl: false,
+			unlinkPanels: false,
+			dateUserInput: {
+				min: null,
+				max: null
+			},
+			timeUserInput: {
+				min: null,
+				max: null
+			}
+		};
+	},
+
+	watch: {
+		minDate(val) {
+			this.dateUserInput.min = null;
+			this.timeUserInput.min = null;
+			this.$nextTick(() => {
+				if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
+					const format = 'HH:mm:ss';
+					this.$refs.maxTimePicker.selectableRange = [
+						[
+							parseDate(formatDate(this.minDate, format), format),
+							parseDate('23:59:59', format)
+						]
+					];
 				}
-			},
-
-			enableMonthArrow() {
-				const nextMonth = (this.leftMonth + 1) % 12;
-				const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0;
-				return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth);
-			},
-
-			enableYearArrow() {
-				return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12;
+			});
+			if (val && this.$refs.minTimePicker) {
+				this.$refs.minTimePicker.date = val;
+				this.$refs.minTimePicker.value = val;
 			}
 		},
 
-		data() {
-			return {
-				popperClass: '',
-				value: [],
-				defaultValue: null,
-				defaultTime: null,
-				minDate: '',
-				maxDate: '',
-				leftDate: new Date(),
-				rightDate: nextMonth(new Date()),
-				rangeState: {
-					endDate: null,
-					selecting: false,
-					row: null,
-					column: null
-				},
-				showTime: false,
-				shortcuts: '',
-				visible: '',
-				disabledDate: '',
-				cellClassName: '',
-				firstDayOfWeek: 7,
-				minTimePickerVisible: false,
-				maxTimePickerVisible: false,
-				format: '',
-				arrowControl: false,
-				unlinkPanels: false,
-				dateUserInput: {
-					min: null,
-					max: null
-				},
-				timeUserInput: {
-					min: null,
-					max: null
-				}
-			};
+		maxDate(val) {
+			this.dateUserInput.max = null;
+			this.timeUserInput.max = null;
+			if (val && this.$refs.maxTimePicker) {
+				this.$refs.maxTimePicker.date = val;
+				this.$refs.maxTimePicker.value = val;
+			}
 		},
 
-		watch: {
-			minDate(val) {
-				this.dateUserInput.min = null;
-				this.timeUserInput.min = null;
+		minTimePickerVisible(val) {
+			if (val) {
 				this.$nextTick(() => {
-					if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
-						const format = 'HH:mm:ss';
-						this.$refs.maxTimePicker.selectableRange = [
-							[
-								parseDate(formatDate(this.minDate, format), format),
-								parseDate('23:59:59', format)
-							]
-						];
-					}
+					this.$refs.minTimePicker.date = this.minDate;
+					this.$refs.minTimePicker.value = this.minDate;
+					this.$refs.minTimePicker.adjustSpinners();
 				});
-				if (val && this.$refs.minTimePicker) {
-					this.$refs.minTimePicker.date = val;
-					this.$refs.minTimePicker.value = val;
-				}
-			},
-
-			maxDate(val) {
-				this.dateUserInput.max = null;
-				this.timeUserInput.max = null;
-				if (val && this.$refs.maxTimePicker) {
-					this.$refs.maxTimePicker.date = val;
-					this.$refs.maxTimePicker.value = val;
-				}
-			},
-
-			minTimePickerVisible(val) {
-				if (val) {
-					this.$nextTick(() => {
-						this.$refs.minTimePicker.date = this.minDate;
-						this.$refs.minTimePicker.value = this.minDate;
-						this.$refs.minTimePicker.adjustSpinners();
-					});
-				}
-			},
+			}
+		},
 
-			maxTimePickerVisible(val) {
-				if (val) {
-					this.$nextTick(() => {
-						this.$refs.maxTimePicker.date = this.maxDate;
-						this.$refs.maxTimePicker.value = this.maxDate;
-						this.$refs.maxTimePicker.adjustSpinners();
-					});
-				}
-			},
+		maxTimePickerVisible(val) {
+			if (val) {
+				this.$nextTick(() => {
+					this.$refs.maxTimePicker.date = this.maxDate;
+					this.$refs.maxTimePicker.value = this.maxDate;
+					this.$refs.maxTimePicker.adjustSpinners();
+				});
+			}
+		},
 
-			value(newVal) {
-				if (!newVal) {
-					this.minDate = null;
-					this.maxDate = null;
-				} else if (Array.isArray(newVal)) {
-					this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
-					this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
-					if (this.minDate) {
-						this.leftDate = this.minDate;
-						if (this.unlinkPanels && this.maxDate) {
-							const minDateYear = this.minDate.getFullYear();
-							const minDateMonth = this.minDate.getMonth();
-							const maxDateYear = this.maxDate.getFullYear();
-							const maxDateMonth = this.maxDate.getMonth();
-							this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth
-								? nextMonth(this.maxDate)
-								: this.maxDate;
-						} else {
-							this.rightDate = nextMonth(this.leftDate);
-						}
+		value(newVal) {
+			if (!newVal) {
+				this.minDate = null;
+				this.maxDate = null;
+			} else if (Array.isArray(newVal)) {
+				this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
+				this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
+				if (this.minDate) {
+					this.leftDate = this.minDate;
+					if (this.unlinkPanels && this.maxDate) {
+						const minDateYear = this.minDate.getFullYear();
+						const minDateMonth = this.minDate.getMonth();
+						const maxDateYear = this.maxDate.getFullYear();
+						const maxDateMonth = this.maxDate.getMonth();
+						this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth
+							? nextMonth(this.maxDate)
+							: this.maxDate;
 					} else {
-						this.leftDate = calcDefaultValue(this.defaultValue)[0];
 						this.rightDate = nextMonth(this.leftDate);
 					}
-				}
-			},
-
-			defaultValue(val) {
-				if (!Array.isArray(this.value)) {
-					const [left, right] = calcDefaultValue(val);
-					this.leftDate = left;
-					this.rightDate = val && val[1] && this.unlinkPanels
-						? right
-						: nextMonth(this.leftDate);
+				} else {
+					this.leftDate = calcDefaultValue(this.defaultValue)[0];
+					this.rightDate = nextMonth(this.leftDate);
 				}
 			}
 		},
 
-		methods: {
-			handleClear() {
-				this.minDate = null;
-				this.maxDate = null;
-				this.leftDate = calcDefaultValue(this.defaultValue)[0];
-				this.rightDate = nextMonth(this.leftDate);
-				this.$emit('pick', null);
-			},
+		defaultValue(val) {
+			if (!Array.isArray(this.value)) {
+				const [left, right] = calcDefaultValue(val);
+				this.leftDate = left;
+				this.rightDate = val && val[1] && this.unlinkPanels
+					? right
+					: nextMonth(this.leftDate);
+			}
+		}
+	},
+
+	methods: {
+		handleClear() {
+			this.minDate = null;
+			this.maxDate = null;
+			this.leftDate = calcDefaultValue(this.defaultValue)[0];
+			this.rightDate = nextMonth(this.leftDate);
+			this.$emit('pick', null);
+		},
 
-			handleChangeRange(val) {
-				this.minDate = val.minDate;
-				this.maxDate = val.maxDate;
-				this.rangeState = val.rangeState;
-			},
+		handleChangeRange(val) {
+			this.minDate = val.minDate;
+			this.maxDate = val.maxDate;
+			this.rangeState = val.rangeState;
+		},
 
-			handleDateInput(value, type) {
-				this.dateUserInput[type] = value;
-				if (value.length !== this.dateFormat.length) return;
-				const parsedValue = parseDate(value, this.dateFormat);
+		handleDateInput(value, type) {
+			this.dateUserInput[type] = value;
+			if (value.length !== this.dateFormat.length) return;
+			const parsedValue = parseDate(value, this.dateFormat);
 
-				if (parsedValue) {
-					if (typeof this.disabledDate === 'function' &&
-						this.disabledDate(new Date(parsedValue))) {
-						return;
+			if (parsedValue) {
+				if (typeof this.disabledDate === 'function' &&
+     this.disabledDate(new Date(parsedValue))) {
+					return;
+				}
+				if (type === 'min') {
+					this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+					this.leftDate = new Date(parsedValue);
+					if (!this.unlinkPanels) {
+						this.rightDate = nextMonth(this.leftDate);
 					}
-					if (type === 'min') {
-						this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
-						this.leftDate = new Date(parsedValue);
-						if (!this.unlinkPanels) {
-							this.rightDate = nextMonth(this.leftDate);
-						}
-					} else {
-						this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
-						this.rightDate = new Date(parsedValue);
-						if (!this.unlinkPanels) {
-							this.leftDate = prevMonth(parsedValue);
-						}
+				} else {
+					this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+					this.rightDate = new Date(parsedValue);
+					if (!this.unlinkPanels) {
+						this.leftDate = prevMonth(parsedValue);
 					}
 				}
-			},
+			}
+		},
 
-			handleDateChange(value, type) {
-				const parsedValue = parseDate(value, this.dateFormat);
-				if (parsedValue) {
-					if (type === 'min') {
-						this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
-						if (this.minDate > this.maxDate) {
-							this.maxDate = this.minDate;
-						}
-					} else {
-						this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
-						if (this.maxDate < this.minDate) {
-							this.minDate = this.maxDate;
-						}
+		handleDateChange(value, type) {
+			const parsedValue = parseDate(value, this.dateFormat);
+			if (parsedValue) {
+				if (type === 'min') {
+					this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+					if (this.minDate > this.maxDate) {
+						this.maxDate = this.minDate;
+					}
+				} else {
+					this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+					if (this.maxDate < this.minDate) {
+						this.minDate = this.maxDate;
 					}
 				}
-			},
+			}
+		},
 
-			handleTimeInput(value, type) {
-				this.timeUserInput[type] = value;
-				if (value.length !== this.timeFormat.length) return;
-				const parsedValue = parseDate(value, this.timeFormat);
+		handleTimeInput(value, type) {
+			this.timeUserInput[type] = value;
+			if (value.length !== this.timeFormat.length) return;
+			const parsedValue = parseDate(value, this.timeFormat);
 
-				if (parsedValue) {
-					if (type === 'min') {
-						this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
-						this.$nextTick(_ => this.$refs.minTimePicker.adjustSpinners());
-					} else {
-						this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
-						this.$nextTick(_ => this.$refs.maxTimePicker.adjustSpinners());
-					}
+			if (parsedValue) {
+				if (type === 'min') {
+					this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+					this.$nextTick(_ => this.$refs.minTimePicker.adjustSpinners());
+				} else {
+					this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+					this.$nextTick(_ => this.$refs.maxTimePicker.adjustSpinners());
 				}
-			},
+			}
+		},
 
-			handleTimeChange(value, type) {
-				const parsedValue = parseDate(value, this.timeFormat);
-				if (parsedValue) {
-					if (type === 'min') {
-						this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
-						if (this.minDate > this.maxDate) {
-							this.maxDate = this.minDate;
-						}
-						this.$refs.minTimePicker.value = this.minDate;
-						this.minTimePickerVisible = false;
-					} else {
-						this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
-						if (this.maxDate < this.minDate) {
-							this.minDate = this.maxDate;
-						}
-						this.$refs.maxTimePicker.value = this.minDate;
-						this.maxTimePickerVisible = false;
+		handleTimeChange(value, type) {
+			const parsedValue = parseDate(value, this.timeFormat);
+			if (parsedValue) {
+				if (type === 'min') {
+					this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+					if (this.minDate > this.maxDate) {
+						this.maxDate = this.minDate;
+					}
+					this.$refs.minTimePicker.value = this.minDate;
+					this.minTimePickerVisible = false;
+				} else {
+					this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+					if (this.maxDate < this.minDate) {
+						this.minDate = this.maxDate;
 					}
+					this.$refs.maxTimePicker.value = this.minDate;
+					this.maxTimePickerVisible = false;
 				}
-			},
+			}
+		},
 
-			handleRangePick(val, close = true) {
-				const defaultTime = this.defaultTime || [];
-				const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
-				const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
+		handleRangePick(val, close = true) {
+			const defaultTime = this.defaultTime || [];
+			const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
+			const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
 
-				if (this.maxDate === maxDate && this.minDate === minDate) {
-					return;
-				}
-				this.onPick && this.onPick(val);
+			if (this.maxDate === maxDate && this.minDate === minDate) {
+				return;
+			}
+			this.onPick && this.onPick(val);
+			this.maxDate = maxDate;
+			this.minDate = minDate;
+
+			// workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+			setTimeout(() => {
 				this.maxDate = maxDate;
 				this.minDate = minDate;
+			}, 10);
+			if (!close || this.showTime) return;
+			this.handleConfirm();
+		},
 
-				// workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
-				setTimeout(() => {
-					this.maxDate = maxDate;
-					this.minDate = minDate;
-				}, 10);
-				if (!close || this.showTime) return;
-				this.handleConfirm();
-			},
-
-			handleShortcutClick(shortcut) {
-				if (shortcut.onClick) {
-					shortcut.onClick(this);
-				}
-			},
-
-			handleMinTimePick(value, visible, first) {
-				this.minDate = this.minDate || new Date();
-				if (value) {
-					this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds());
-				}
-
-				if (!first) {
-					this.minTimePickerVisible = visible;
-				}
+		handleShortcutClick(shortcut) {
+			if (shortcut.onClick) {
+				shortcut.onClick(this);
+			}
+		},
 
-				if (!this.maxDate || this.maxDate && this.maxDate.getTime() < this.minDate.getTime()) {
-					this.maxDate = new Date(this.minDate);
-				}
-			},
+		handleMinTimePick(value, visible, first) {
+			this.minDate = this.minDate || new Date();
+			if (value) {
+				this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds());
+			}
 
-			handleMinTimeClose() {
-				this.minTimePickerVisible = false;
-			},
+			if (!first) {
+				this.minTimePickerVisible = visible;
+			}
 
-			handleMaxTimePick(value, visible, first) {
-				if (this.maxDate && value) {
-					this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());
-				}
+			if (!this.maxDate || this.maxDate && this.maxDate.getTime() < this.minDate.getTime()) {
+				this.maxDate = new Date(this.minDate);
+			}
+		},
 
-				if (!first) {
-					this.maxTimePickerVisible = visible;
-				}
+		handleMinTimeClose() {
+			this.minTimePickerVisible = false;
+		},
 
-				if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {
-					this.minDate = new Date(this.maxDate);
-				}
-			},
+		handleMaxTimePick(value, visible, first) {
+			if (this.maxDate && value) {
+				this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());
+			}
 
-			handleMaxTimeClose() {
-				this.maxTimePickerVisible = false;
-			},
+			if (!first) {
+				this.maxTimePickerVisible = visible;
+			}
 
-			// leftPrev*, rightNext* need to take care of `unlinkPanels`
-			leftPrevYear() {
-				this.leftDate = prevYear(this.leftDate);
-				if (!this.unlinkPanels) {
-					this.rightDate = nextMonth(this.leftDate);
-				}
-			},
+			if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {
+				this.minDate = new Date(this.maxDate);
+			}
+		},
 
-			leftPrevMonth() {
-				this.leftDate = prevMonth(this.leftDate);
-				if (!this.unlinkPanels) {
-					this.rightDate = nextMonth(this.leftDate);
-				}
-			},
+		handleMaxTimeClose() {
+			this.maxTimePickerVisible = false;
+		},
 
-			rightNextYear() {
-				if (!this.unlinkPanels) {
-					this.leftDate = nextYear(this.leftDate);
-					this.rightDate = nextMonth(this.leftDate);
-				} else {
-					this.rightDate = nextYear(this.rightDate);
-				}
-			},
+		// leftPrev*, rightNext* need to take care of `unlinkPanels`
+		leftPrevYear() {
+			this.leftDate = prevYear(this.leftDate);
+			if (!this.unlinkPanels) {
+				this.rightDate = nextMonth(this.leftDate);
+			}
+		},
 
-			rightNextMonth() {
-				if (!this.unlinkPanels) {
-					this.leftDate = nextMonth(this.leftDate);
-					this.rightDate = nextMonth(this.leftDate);
-				} else {
-					this.rightDate = nextMonth(this.rightDate);
-				}
-			},
+		leftPrevMonth() {
+			this.leftDate = prevMonth(this.leftDate);
+			if (!this.unlinkPanels) {
+				this.rightDate = nextMonth(this.leftDate);
+			}
+		},
 
-			// leftNext*, rightPrev* are called when `unlinkPanels` is true
-			leftNextYear() {
+		rightNextYear() {
+			if (!this.unlinkPanels) {
 				this.leftDate = nextYear(this.leftDate);
-			},
+				this.rightDate = nextMonth(this.leftDate);
+			} else {
+				this.rightDate = nextYear(this.rightDate);
+			}
+		},
 
-			leftNextMonth() {
+		rightNextMonth() {
+			if (!this.unlinkPanels) {
 				this.leftDate = nextMonth(this.leftDate);
-			},
+				this.rightDate = nextMonth(this.leftDate);
+			} else {
+				this.rightDate = nextMonth(this.rightDate);
+			}
+		},
 
-			rightPrevYear() {
-				this.rightDate = prevYear(this.rightDate);
-			},
+		// leftNext*, rightPrev* are called when `unlinkPanels` is true
+		leftNextYear() {
+			this.leftDate = nextYear(this.leftDate);
+		},
 
-			rightPrevMonth() {
-				this.rightDate = prevMonth(this.rightDate);
-			},
+		leftNextMonth() {
+			this.leftDate = nextMonth(this.leftDate);
+		},
 
-			handleConfirm(visible = false) {
-				if (this.isValidValue([this.minDate, this.maxDate])) {
-					this.$emit('pick', [this.minDate, this.maxDate], visible);
-				}
-			},
+		rightPrevYear() {
+			this.rightDate = prevYear(this.rightDate);
+		},
 
-			isValidValue(value) {
-				return Array.isArray(value) &&
-					value && value[0] && value[1] &&
-					isDate(value[0]) && isDate(value[1]) &&
-					value[0].getTime() <= value[1].getTime() && (
-					typeof this.disabledDate === 'function'
-						? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
-						: true
-				);
-			},
+		rightPrevMonth() {
+			this.rightDate = prevMonth(this.rightDate);
+		},
 
-			resetView() {
-				// NOTE: this is a hack to reset {min, max}Date on picker open.
-				// TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
-				//			 an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
-				if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;
-				this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
-				this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
+		handleConfirm(visible = false) {
+			if (this.isValidValue([this.minDate, this.maxDate])) {
+				this.$emit('pick', [this.minDate, this.maxDate], visible);
 			}
 		},
 
-		components: { TimePicker, DateTable, ElInput, ElButton }
-	};
+		isValidValue(value) {
+			return Array.isArray(value) &&
+    value && value[0] && value[1] &&
+    isDate(value[0]) && isDate(value[1]) &&
+    value[0].getTime() <= value[1].getTime() && (
+				typeof this.disabledDate === 'function'
+					? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
+					: true
+			);
+		},
+
+		resetView() {
+			// NOTE: this is a hack to reset {min, max}Date on picker open.
+			// TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+			//			 an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+			if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;
+			this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
+			this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
+		}
+	},
+
+	components: { TimePicker, DateTable, ElInput, ElButton }
+};
 </script>