Skip to content

Commit ecec908

Browse files
wacky6Leopoldthecoder
wacky6
authored and
Leopoldthecoder
committed
DateTimePicker: fix incorrect date on time pick (#11474)
* date-time-picker: fix incorrect date on time pick * date-time-picker: fix incorrect date on confirm
1 parent 8c1b4d8 commit ecec908

File tree

4 files changed

+92
-12
lines changed

4 files changed

+92
-12
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@
190190
isDate,
191191
modifyDate,
192192
modifyTime,
193-
modifyWithDefaultTime,
193+
modifyWithTimeString,
194194
prevYear,
195195
nextYear,
196196
prevMonth,
@@ -498,8 +498,8 @@
498498
499499
handleRangePick(val, close = true) {
500500
const defaultTime = this.defaultTime || [];
501-
const minDate = modifyWithDefaultTime(val.minDate, defaultTime[0]);
502-
const maxDate = modifyWithDefaultTime(val.maxDate, defaultTime[1]);
501+
const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
502+
const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
503503
504504
if (this.maxDate === maxDate && this.minDate === minDate) {
505505
return;

‎packages/date-picker/src/panel/date.vue‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@
150150
isDate,
151151
modifyDate,
152152
modifyTime,
153-
modifyWithDefaultTime,
153+
modifyWithTimeString,
154154
clearMilliseconds,
155155
clearTime,
156156
prevYear,
@@ -192,7 +192,7 @@
192192
if (isDate(val)) {
193193
this.date = new Date(val);
194194
} else {
195-
this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
195+
this.date = this.getDefaultValue();
196196
}
197197
},
198198
@@ -233,7 +233,7 @@
233233
},
234234
235235
handleClear() {
236-
this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
236+
this.date = this.getDefaultValue();
237237
this.$emit('pick', null);
238238
},
239239
@@ -303,7 +303,9 @@
303303
304304
handleTimePick(value, visible, first) {
305305
if (isDate(value)) {
306-
const newDate = this.value ? modifyTime(this.date, value.getHours(), value.getMinutes(), value.getSeconds()) : modifyWithDefaultTime(value, this.defaultTime);
306+
const newDate = this.value
307+
? modifyTime(this.value, value.getHours(), value.getMinutes(), value.getSeconds())
308+
: modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
307309
this.date = newDate;
308310
this.emit(this.date, true);
309311
} else {
@@ -334,7 +336,9 @@
334336
335337
handleDatePick(value) {
336338
if (this.selectionMode === 'day') {
337-
this.date = this.value ? modifyDate(this.date, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithDefaultTime(value, this.defaultTime);
339+
this.date = this.value
340+
? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())
341+
: modifyWithTimeString(value, this.defaultTime);
338342
this.emit(this.date, this.showTime);
339343
} else if (this.selectionMode === 'week') {
340344
this.emit(value.date);
@@ -366,8 +370,13 @@
366370
if (this.selectionMode === 'dates') {
367371
this.emit(this.selectedDate);
368372
} else {
369-
const date = this.value ? this.date : modifyWithDefaultTime(this.date, this.defaultTime);
370-
this.emit(date);
373+
// value were emitted in handle{Date,Time}Pick, nothing to update here
374+
// deal with the scenario where: user opens the picker, then confirm without doing anything
375+
const value = this.value
376+
? this.value
377+
: modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
378+
this.date = new Date(value); // refresh date
379+
this.emit(value);
371380
}
372381
},
373382
@@ -466,6 +475,12 @@
466475
? !this.disabledDate(value)
467476
: true
468477
);
478+
},
479+
480+
getDefaultValue() {
481+
// if default-value is set, return it
482+
// otherwise, return now (the moment this method gets called)
483+
return this.defaultValue ? new Date(this.defaultValue) : new Date();
469484
}
470485
},
471486
@@ -478,7 +493,7 @@
478493
popperClass: '',
479494
date: new Date(),
480495
value: '',
481-
defaultValue: null,
496+
defaultValue: null, // use getDefaultValue() for time computation
482497
defaultTime: null,
483498
showTime: false,
484499
selectionMode: 'day',

‎packages/date-picker/src/util/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export const modifyTime = function(date, h, m, s) {
144144
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, s, date.getMilliseconds());
145145
};
146146

147-
export const modifyWithDefaultTime = (date, time) => {
147+
export const modifyWithTimeString = (date, time) => {
148148
if (date == null || !time) {
149149
return date;
150150
}

‎test/unit/specs/date-picker.spec.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1329,6 +1329,71 @@ describe('DatePicker', () => {
13291329
}, DELAY);
13301330
}, DELAY);
13311331
});
1332+
1333+
it('select time honors picked date', done => {
1334+
vm = createVue({
1335+
template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
1336+
data() {
1337+
return {
1338+
value: new Date(2000, 9, 1, 12, 0, 0) // 2010-10-01 12:00:00
1339+
};
1340+
}
1341+
}, true);
1342+
vm.$refs.compo.$el.querySelector('input').focus();
1343+
setTimeout(_ => {
1344+
// changed month / year should not effect picked time
1345+
vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-arrow-right').click();
1346+
setTimeout(_ => {
1347+
vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-d-arrow-right').click();
1348+
setTimeout(_ => {
1349+
// simulate time selection
1350+
// handleTimePick takes Date object, but it's non-time fields are ignored
1351+
vm.$refs.compo.picker.handleTimePick(new Date(2001, 10, 10, 13, 14, 15), false, false);
1352+
setTimeout(_ => {
1353+
expect(vm.value.getFullYear()).to.equal(2000);
1354+
expect(vm.value.getMonth()).to.equal(9);
1355+
expect(vm.value.getDate()).to.equal(1);
1356+
expect(vm.value.getHours()).to.equal(13);
1357+
expect(vm.value.getMinutes()).to.equal(14);
1358+
expect(vm.value.getSeconds()).to.equal(15);
1359+
done();
1360+
}, DELAY);
1361+
}, DELAY);
1362+
}, DELAY);
1363+
}, DELAY);
1364+
});
1365+
1366+
it('confirm button honors picked date', done => {
1367+
vm = createVue({
1368+
template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
1369+
data() {
1370+
return {
1371+
value: new Date(2000, 9, 1, 12, 0, 0) // 2010-10-01 12:00:00
1372+
};
1373+
}
1374+
}, true);
1375+
vm.$refs.compo.$el.querySelector('input').focus();
1376+
setTimeout(_ => {
1377+
// changed month / year should not effect picked time
1378+
vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-arrow-right').click();
1379+
setTimeout(_ => {
1380+
vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-d-arrow-right').click();
1381+
setTimeout(_ => {
1382+
// click confirm button
1383+
vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();
1384+
setTimeout(_ => {
1385+
expect(vm.value.getFullYear()).to.equal(2000);
1386+
expect(vm.value.getMonth()).to.equal(9);
1387+
expect(vm.value.getDate()).to.equal(1);
1388+
expect(vm.value.getHours()).to.equal(12);
1389+
expect(vm.value.getMinutes()).to.equal(0);
1390+
expect(vm.value.getSeconds()).to.equal(0);
1391+
done();
1392+
}, DELAY);
1393+
}, DELAY);
1394+
}, DELAY);
1395+
}, DELAY);
1396+
});
13321397
});
13331398

13341399
describe('type:week', () => {

0 commit comments

Comments
 (0)