From 1bdecf9c3905706373f6d9e2cd9a049e8fcf81f5 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Tue, 3 Jan 2017 17:38:44 +0800 Subject: [PATCH] DatePicker: fix change event no trigger when setting the initial value, fixed #2167 --- packages/date-picker/src/picker.vue | 70 +++++++++---------- .../date-picker/src/picker/time-picker.js | 6 ++ .../date-picker/src/picker/time-select.js | 2 +- packages/date-picker/src/util/index.js | 8 ++- 4 files changed, 45 insertions(+), 41 deletions(-) diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index ca8aec787..ef7daa212 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -10,8 +10,8 @@ @focus="handleFocus" @blur="handleBlur" @keydown.native="handleKeydown" - :value="visualValue" - @change.native="visualValue = $event.target.value" + :value="displayValue" + @change.native="displayValue = $event.target.value" ref="reference"> import Vue from 'vue'; import Clickoutside from 'element-ui/src/utils/clickoutside'; -import { formatDate, parseDate, getWeekNumber, equalDate } from './util'; +import { formatDate, parseDate, getWeekNumber, equalDate, isDate } from './util'; import Popper from 'element-ui/src/utils/vue-popper'; import Emitter from 'element-ui/src/mixins/emitter'; import ElInput from 'element-ui/packages/input'; @@ -213,7 +213,7 @@ export default { return { pickerVisible: false, showClose: false, - internalValue: '' + currentValue: '' }; }, @@ -222,16 +222,22 @@ export default { if (this.readonly || this.disabled) return; val ? this.showPicker() : this.hidePicker(); }, - internalValue(val) { - if (!val && this.picker && typeof this.picker.handleClear === 'function') { + currentValue(val) { + if (val) return; + if (this.picker && typeof this.picker.handleClear === 'function') { this.picker.handleClear(); + } else { + this.$emit('input'); } }, value: { immediate: true, handler(val) { - this.internalValue = val; + this.currentValue = isDate(val) ? new Date(val) : val; } + }, + displayValue(val) { + this.$emit('change', val); } }, @@ -246,7 +252,7 @@ export default { }, valueIsEmpty() { - const val = this.internalValue; + const val = this.currentValue; if (Array.isArray(val)) { for (let i = 0, len = val.length; i < len; i++) { if (val[i]) { @@ -284,9 +290,9 @@ export default { return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1; }, - visualValue: { + displayValue: { get() { - const value = this.internalValue; + const value = this.currentValue; if (!value) return; const formatter = ( TYPE_VALUE_RESOLVER_MAP[this.type] || @@ -318,9 +324,6 @@ export default { }, created() { - this.cachePicker = {}; - this.cacheChange = {}; - // vue-popper this.options = { boundariesPadding: 0, @@ -340,26 +343,25 @@ export default { handleClickIcon() { if (this.readonly || this.disabled) return; if (this.showClose) { - this.internalValue = ''; + this.currentValue = ''; + this.showClose = false; } else { this.pickerVisible = !this.pickerVisible; } }, - dateIsUpdated(date, cache) { - let updated = true; - - if (Array.isArray(date)) { - if (equalDate(cache.cacheDateMin, date[0]) && - equalDate(cache.cacheDateMax, date[1])) updated = false; - cache.cacheDateMin = new Date(date[0]); - cache.cacheDateMax = new Date(date[1]); + dateChanged(dateA, dateB) { + if (Array.isArray(dateA)) { + let len = dateA.length; + if (!dateB) return true; + while (len--) { + if (!equalDate(dateA[len], dateB[len])) return true; + } } else { - if (equalDate(cache.cacheDate, date)) updated = false; - cache.cacheDate = new Date(date); + if (!equalDate(dateA, dateB)) return true; } - return updated; + return false; }, handleClose() { @@ -400,7 +402,7 @@ export default { showPicker() { if (this.$isServer) return; if (!this.picker) { - this.panel.defaultValue = this.internalValue; + this.panel.defaultValue = this.currentValue; this.picker = new Vue(this.panel).$mount(document.createElement('div')); this.picker.popperClass = this.popperClass; this.popperElm = this.picker.$el; @@ -423,12 +425,6 @@ export default { this.picker.selectableRange = ranges.map(range => parser(range, format)); } - if (this.type === 'time-select' && options) { - this.$watch('pickerOptions.minTime', val => { - this.picker.minTime = val; - }); - } - for (const option in options) { if (options.hasOwnProperty(option) && // 忽略 time-picker 的该配置项 @@ -446,9 +442,7 @@ export default { this.picker.$on('dodestroy', this.doDestroy); this.picker.$on('pick', (date, visible = false) => { - if (this.dateIsUpdated(date, this.cachePicker)) this.$emit('input', date); - - this.$nextTick(() => this.dateIsUpdated(date, this.cacheChange) && this.$emit('change', this.visualValue)); + if (this.dateChanged(date, this.value)) this.$emit('input', date); this.pickerVisible = this.picker.visible = visible; this.picker.resetView && this.picker.resetView(); }); @@ -463,10 +457,10 @@ export default { this.updatePopper(); - if (this.internalValue instanceof Date) { - this.picker.date = new Date(this.internalValue.getTime()); + if (this.currentValue instanceof Date) { + this.picker.date = new Date(this.currentValue.getTime()); } else { - this.picker.value = this.internalValue; + this.picker.value = this.currentValue; } this.picker.resetView && this.picker.resetView(); diff --git a/packages/date-picker/src/picker/time-picker.js b/packages/date-picker/src/picker/time-picker.js index d127d2cdd..294d2eb61 100644 --- a/packages/date-picker/src/picker/time-picker.js +++ b/packages/date-picker/src/picker/time-picker.js @@ -11,6 +11,12 @@ export default { isRange: Boolean }, + data() { + return { + type: '' + }; + }, + created() { this.type = this.isRange ? 'timerange' : 'time'; this.panel = this.isRange ? TimeRangePanel : TimePanel; diff --git a/packages/date-picker/src/picker/time-select.js b/packages/date-picker/src/picker/time-select.js index 496849590..fca8d5648 100644 --- a/packages/date-picker/src/picker/time-select.js +++ b/packages/date-picker/src/picker/time-select.js @@ -6,7 +6,7 @@ export default { name: 'ElTimeSelect', - created() { + beforeCreate() { this.type = 'time-select'; this.panel = Panel; } diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js index d007afa2a..abaa640ad 100644 --- a/packages/date-picker/src/util/index.js +++ b/packages/date-picker/src/util/index.js @@ -13,9 +13,13 @@ export const equalDate = function(dateA, dateB) { }; export const toDate = function(date) { + return isDate(date) ? date : null; +}; + +export const isDate = function(date) { date = new Date(date); - if (isNaN(date.getTime())) return null; - return date; + if (isNaN(date.getTime())) return false; + return true; }; export const formatDate = function(date, format) {