diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index 9368c6a20..ac66148bd 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -280,18 +280,36 @@ const formatAsFormatAndType = (value, customFormat, type) => { return formatter(value, format); }; -// only considers date-picker's value: Date or [Date, Date] +/* + * Considers: + * 1. Date object + * 2. date string + * 3. array of 1 or 2 + */ const valueEquals = function(a, b) { + // considers Date object and string + const dateEquals = function(a, b) { + const aIsDate = a instanceof Date; + const bIsDate = b instanceof Date; + if (aIsDate && bIsDate) { + return a.getTime() === b.getTime(); + } + if (!aIsDate && !bIsDate) { + return a === b; + } + return false; + }; + const aIsArray = a instanceof Array; const bIsArray = b instanceof Array; if (aIsArray && bIsArray) { if (a.length !== b.length) { return false; } - return a.every((item, index) => new Date(item).getTime() === new Date(b[index]).getTime()); + return a.every((item, index) => dateEquals(item, b[index])); } if (!aIsArray && !bIsArray) { - return new Date(a).getTime() === new Date(b).getTime(); + return dateEquals(a, b); } return false; }; @@ -865,7 +883,7 @@ export default { emitChange(val) { // determine user real change only - if (val !== this.valueOnOpen) { + if (!valueEquals(val, this.valueOnOpen)) { this.$emit('change', val); this.dispatch('ElFormItem', 'el.form.change', val); this.valueOnOpen = val; @@ -874,7 +892,7 @@ export default { emitInput(val) { const formatted = this.formatToValue(val); - if (!valueEquals(this.value, formatted) || this.type === 'dates') { + if (!valueEquals(this.value, formatted)) { this.$emit('input', formatted); } }, diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index e8fe4c017..cd0fd8645 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -1676,6 +1676,60 @@ describe('DatePicker', () => { }, DELAY); }); + it('change event', done => { + vm = createVue({ + template: ` + `, + data() { + return { + value: '' + }; + } + }, true); + + const spy = sinon.spy(); + vm.$refs.compo.$on('change', spy); + + const input = vm.$el.querySelector('input'); + + input.blur(); + input.focus(); + + setTimeout(_ => { + const picker = vm.$refs.compo.picker; + setTimeout(_ => { + picker.$el.querySelector('td.available').click(); + setTimeout(_ => { + picker.$el.querySelector('td.available ~ td.available').click(); + setTimeout(_ => { + expect(spy.calledOnce).to.equal(true); + console.log('first assert passed'); + // change event is not emitted if used does not change value + // datarange also requires proper array equality check + input.blur(); + input.focus(); + setTimeout(_ => { + const startCell = picker.$el.querySelector('td.start-date'); + const endCell = picker.$el.querySelector('td.end-date'); + startCell.click(); + setTimeout(_ => { + endCell.click(); + setTimeout(_ => { + expect(spy.calledOnce).to.equal(true); + console.log('second assert passed'); + done(); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }); + describe('default value', () => { it('single', done => { let defaultValue = '2000-10-01';