diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue index 432ed1789..6df4788e8 100644 --- a/packages/date-picker/src/basic/date-table.vue +++ b/packages/date-picker/src/basic/date-table.vue @@ -311,7 +311,8 @@ newDate.setDate(parseInt(cell.text, 10)); - return getWeekNumber(newDate) === getWeekNumber(this.date); + const valueYear = isDate(this.value) ? this.value.getFullYear() : null; + return year === valueYear && getWeekNumber(newDate) === getWeekNumber(this.value); }, markRange(maxDate) { diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js index 556034242..783564c1e 100644 --- a/packages/date-picker/src/util/index.js +++ b/packages/date-picker/src/util/index.js @@ -95,6 +95,7 @@ export const getStartDateOfMonth = function(year, month) { }; export const getWeekNumber = function(src) { + if (!isDate(src)) return null; const date = new Date(src.getTime()); date.setHours(0, 0, 0, 0); // Thursday in current week decides the year. diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index 44b2702a5..6cd6b36e8 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -1354,6 +1354,50 @@ describe('DatePicker', () => { }, DELAY); }, DELAY); }); + + it('highlight correctly', done => { + vm = createVue({ + template: '', + data() { + return { + value: null + }; + } + }, true); + + const input = vm.$el.querySelector('input'); + input.blur(); + input.focus(); + + setTimeout(() => { + const pickerEl = vm.$refs.compo.picker.$el; + const numberOfHighlightRows = () => pickerEl.querySelectorAll('.el-date-table__row.current').length; + expect(numberOfHighlightRows()).to.equal(0); + setTimeout(() => { + pickerEl.querySelector('td.available').click(); + setTimeout(() => { + expect(vm.value).to.exist; + input.blur(); + input.focus(); + setTimeout(() => { + expect(numberOfHighlightRows()).to.equal(1); + // test: next month should not have highlight + pickerEl.querySelector('.el-icon-arrow-right').click(); + setTimeout(() => { + expect(numberOfHighlightRows()).to.equal(0); + // test: next year should not have highlight + pickerEl.querySelector('.el-icon-arrow-left').click(); // go back one month + pickerEl.querySelector('.el-icon-d-arrow-right').click(); + setTimeout(() => { + expect(numberOfHighlightRows()).to.equal(0); + done(); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }, DELAY); + }); }); describe('type:daterange', () => {