github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Picker only emit user change (#6214) 

* only emit user change for timepicker and datepicker

* Test: remove custom timeout
pull/7144/head
Dreamacro 2017-09-20 14:34:49 +08:00 committed by 杨奕
parent b922664aa6
commit 1912c473ef
9 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/date-picker/src/basic/date-table.vue
View File

@ -215,7 +215,7 @@
this.$emit('pick', { this.$emit('pick', {
minDate: this.minDate, minDate: this.minDate,
maxDate: this.maxDate maxDate: this.maxDate
}); }, true, false);
} }
} }
}, },

6
packages/date-picker/src/basic/year-table.vue
View File

@ -88,11 +88,11 @@
}, },
nextTenYear() { nextTenYear() {
this.$emit('pick', Number(this.year) + 10, false); this.$emit('pick', Number(this.year) + 10, false, true);
}, },
prevTenYear() { prevTenYear() {
this.$emit('pick', Number(this.year) - 10, false); this.$emit('pick', Number(this.year) - 10, false, true);
}, },
handleYearTableClick(event) { handleYearTableClick(event) {
@ -100,7 +100,7 @@
if (target.tagName === 'A') { if (target.tagName === 'A') {
if (hasClass(target.parentNode, 'disabled')) return; if (hasClass(target.parentNode, 'disabled')) return;
const year = target.textContent || target.innerText; const year = target.textContent || target.innerText;
this.$emit('pick', Number(year)); this.$emit('pick', Number(year), true, true);
} }
} }
} }

10
packages/date-picker/src/panel/date-range.vue
View File

@ -308,7 +308,7 @@
this.minDate = newVal[0] ? toDate(newVal[0]) : null; this.minDate = newVal[0] ? toDate(newVal[0]) : null;
this.maxDate = newVal[1] ? toDate(newVal[1]) : null; this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
if (this.minDate) this.date = new Date(this.minDate); if (this.minDate) this.date = new Date(this.minDate);
this.handleConfirm(true); this.handleConfirm(true, false);
} }
} }
}, },
@ -392,7 +392,7 @@
} }
}, },
handleRangePick(val, close = true) { handleRangePick(val, close = true, user = true) {
if (this.maxDate === val.maxDate && this.minDate === val.minDate) { if (this.maxDate === val.maxDate && this.minDate === val.minDate) {
return; return;
} }
@ -400,7 +400,7 @@
this.maxDate = val.maxDate; this.maxDate = val.maxDate;
this.minDate = val.minDate; this.minDate = val.minDate;
if (!close || this.showTime) return; if (!close || this.showTime) return;
this.handleConfirm(); this.handleConfirm(false, user);
}, },
changeToToday() { changeToToday() {
@ -477,9 +477,9 @@
this.resetDate(); this.resetDate();
}, },
handleConfirm(visible = false) { handleConfirm(visible = false, user = true) {
if (this.minDate && this.maxDate) { if (this.minDate && this.maxDate) {
this.$emit('pick', [this.minDate, this.maxDate], visible); this.$emit('pick', [this.minDate, this.maxDate], visible, user);
} }
}, },

21
packages/date-picker/src/panel/date.vue
View File

@ -161,7 +161,7 @@
this.date = newVal; this.date = newVal;
this.year = newVal.getFullYear(); this.year = newVal.getFullYear();
this.month = newVal.getMonth(); this.month = newVal.getMonth();
this.$emit('pick', newVal, false); this.$emit('pick', newVal, false, false);
} }
}, },
@ -190,7 +190,7 @@
methods: { methods: {
handleClear() { handleClear() {
this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date(); this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
this.$emit('pick'); this.$emit('pick', this.date);
}, },
resetDate() { resetDate() {
@ -256,7 +256,7 @@
} }
}, },
handleTimePick(picker, visible, first) { handleTimePick(picker, visible) {
if (picker) { if (picker) {
let oldDate = new Date(this.date.getTime()); let oldDate = new Date(this.date.getTime());
let hour = picker.getHours(); let hour = picker.getHours();
@ -273,9 +273,7 @@
this.date = new Date(oldDate.getTime()); this.date = new Date(oldDate.getTime());
} }
if (!first) { this.timePickerVisible = visible;
this.timePickerVisible = visible;
}
}, },
handleMonthPick(month) { handleMonthPick(month) {
@ -294,28 +292,28 @@
} }
}, },
handleDatePick(value) { handleDatePick(value, close, user = true) {
if (this.selectionMode === 'day') { if (this.selectionMode === 'day') {
if (!this.showTime) { if (!this.showTime) {
this.$emit('pick', new Date(value.getTime())); this.$emit('pick', new Date(value.getTime()), false, user);
} }
this.date.setFullYear(value.getFullYear()); this.date.setFullYear(value.getFullYear());
this.date.setMonth(value.getMonth(), value.getDate()); this.date.setMonth(value.getMonth(), value.getDate());
} else if (this.selectionMode === 'week') { } else if (this.selectionMode === 'week') {
this.week = value.week; this.week = value.week;
this.$emit('pick', value.date); this.$emit('pick', value.date, false, user);
} }
this.resetDate(); this.resetDate();
}, },
handleYearPick(year, close = true) { handleYearPick(year, close = true, user) {
this.year = year; this.year = year;
if (!close) return; if (!close) return;
this.date.setFullYear(year); this.date.setFullYear(year);
if (this.selectionMode === 'year') { if (this.selectionMode === 'year') {
this.$emit('pick', new Date(year, 0, 1)); this.$emit('pick', new Date(year, 0, 1), false, user);
} else { } else {
this.currentView = 'month'; this.currentView = 'month';
} }
@ -330,6 +328,7 @@
}, },
confirm() { confirm() {
console.log(111);
this.date.setMilliseconds(0); this.date.setMilliseconds(0);
this.$emit('pick', this.date); this.$emit('pick', this.date);
}, },

16
packages/date-picker/src/panel/time-range.vue
View File

@ -147,12 +147,12 @@
hours: time.minTime.getHours(), hours: time.minTime.getHours(),
minutes: time.minTime.getMinutes(), minutes: time.minTime.getMinutes(),
seconds: time.minTime.getSeconds() seconds: time.minTime.getSeconds()
}); }, true);
this.handleMaxChange({ this.handleMaxChange({
hours: time.maxTime.getHours(), hours: time.maxTime.getHours(),
minutes: time.maxTime.getMinutes(), minutes: time.maxTime.getMinutes(),
seconds: time.maxTime.getSeconds() seconds: time.maxTime.getSeconds()
}); }, true);
}, },
handleClear() { handleClear() {
@ -163,7 +163,7 @@
this.$emit('pick'); this.$emit('pick');
}, },
handleChange() { handleChange(notUser) {
if (this.minTime > this.maxTime) return; if (this.minTime > this.maxTime) return;
MIN_TIME.setFullYear(this.minTime.getFullYear()); MIN_TIME.setFullYear(this.minTime.getFullYear());
MIN_TIME.setMonth(this.minTime.getMonth(), this.minTime.getDate()); MIN_TIME.setMonth(this.minTime.getMonth(), this.minTime.getDate());
@ -171,10 +171,10 @@
MAX_TIME.setMonth(this.maxTime.getMonth(), this.maxTime.getDate()); MAX_TIME.setMonth(this.maxTime.getMonth(), this.maxTime.getDate());
this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]]; this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]];
this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]]; this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]];
this.handleConfirm(true); this.handleConfirm(true, false, notUser);
}, },
handleMaxChange(date) { handleMaxChange(date, notUser) {
if (date.hours !== undefined) { if (date.hours !== undefined) {
this.maxTime.setHours(date.hours); this.maxTime.setHours(date.hours);
this.maxHours = this.maxTime.getHours(); this.maxHours = this.maxTime.getHours();
@ -190,7 +190,7 @@
this.handleChange(); this.handleChange();
}, },
handleMinChange(date) { handleMinChange(date, notUser) {
if (date.hours !== undefined) { if (date.hours !== undefined) {
this.minTime.setHours(date.hours); this.minTime.setHours(date.hours);
this.minHours = this.minTime.getHours(); this.minHours = this.minTime.getHours();
@ -217,7 +217,7 @@
this.selectionRange = [start + this.offset, end + this.offset]; this.selectionRange = [start + this.offset, end + this.offset];
}, },
handleConfirm(visible = false, first = false) { handleConfirm(visible = false, first = false, notUser = false) {
const minSelectableRange = this.$refs.minSpinner.selectableRange; const minSelectableRange = this.$refs.minSpinner.selectableRange;
const maxSelectableRange = this.$refs.maxSpinner.selectableRange; const maxSelectableRange = this.$refs.maxSpinner.selectableRange;
@ -225,7 +225,7 @@
this.maxTime = limitRange(this.maxTime, maxSelectableRange); this.maxTime = limitRange(this.maxTime, maxSelectableRange);
if (first) return; if (first) return;
this.$emit('pick', [this.minTime, this.maxTime], visible, first); this.$emit('pick', [this.minTime, this.maxTime], visible, !notUser);
}, },
adjustScrollTop() { adjustScrollTop() {

7
packages/date-picker/src/panel/time-select.vue
View File

@ -79,9 +79,9 @@
value(val) { value(val) {
if (!val) return; if (!val) return;
if (this.minTime && compareTime(val, this.minTime) < 0) { if (this.minTime && compareTime(val, this.minTime) < 0) {
this.$emit('pick'); this.$emit('pick', '', false, false);
} else if (this.maxTime && compareTime(val, this.maxTime) > 0) { } else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
this.$emit('pick'); this.$emit('pick', '', false, false);
} }
this.$nextTick(() => this.scrollToOption()); this.$nextTick(() => this.scrollToOption());
} }
@ -95,7 +95,7 @@
}, },
handleClear() { handleClear() {
this.$emit('pick'); this.$emit('pick', '', false, false);
}, },
scrollToOption(className = 'selected') { scrollToOption(className = 'selected') {
@ -122,6 +122,7 @@
} }
if (!items[index].disabled) { if (!items[index].disabled) {
this.value = items[index].value; this.value = items[index].value;
this.$emit('pick', this.value, true);
} }
} }
}, },

15
packages/date-picker/src/panel/time.vue
View File

@ -79,7 +79,7 @@
hours: date.getHours(), hours: date.getHours(),
minutes: date.getMinutes(), minutes: date.getMinutes(),
seconds: date.getSeconds() seconds: date.getSeconds()
}); }, true);
this.$nextTick(_ => this.adjustScrollTop()); this.$nextTick(_ => this.adjustScrollTop());
}, },
@ -121,7 +121,7 @@
methods: { methods: {
handleClear() { handleClear() {
this.$emit('pick'); this.$emit('pick', '', false, true);
}, },
handleCancel() { handleCancel() {
@ -132,10 +132,10 @@
this.minutes = this.currentDate.getMinutes(); this.minutes = this.currentDate.getMinutes();
this.seconds = this.currentDate.getSeconds(); this.seconds = this.currentDate.getSeconds();
const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss')); const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
this.$emit('pick', date); this.$emit('pick', date, false, true);
}, },
handleChange(date) { handleChange(date, notUser) {
if (date.hours !== undefined) { if (date.hours !== undefined) {
this.currentDate.setHours(date.hours); this.currentDate.setHours(date.hours);
this.hours = this.currentDate.getHours(); this.hours = this.currentDate.getHours();
@ -148,8 +148,7 @@
this.currentDate.setSeconds(date.seconds); this.currentDate.setSeconds(date.seconds);
this.seconds = this.currentDate.getSeconds(); this.seconds = this.currentDate.getSeconds();
} }
this.handleConfirm(true, null, notUser);
this.handleConfirm(true);
}, },
setSelectionRange(start, end) { setSelectionRange(start, end) {
@ -157,10 +156,10 @@
this.selectionRange = [start, end]; this.selectionRange = [start, end];
}, },
handleConfirm(visible = false, first) { handleConfirm(visible = false, first, notUser = false) {
if (first) return; if (first) return;
const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss')); const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
this.$emit('pick', date, visible, first); this.$emit('pick', date, visible, !notUser);
}, },
adjustScrollTop() { adjustScrollTop() {

6
packages/date-picker/src/picker.vue
View File

@ -267,7 +267,6 @@ export default {
} }
}, },
displayValue(val) { displayValue(val) {
this.$emit('change', val);
this.dispatch('ElFormItem', 'el.form.change'); this.dispatch('ElFormItem', 'el.form.change');
} }
}, },
@ -492,10 +491,13 @@ export default {
this.picker.resetView && this.picker.resetView(); this.picker.resetView && this.picker.resetView();
this.picker.$on('dodestroy', this.doDestroy); this.picker.$on('dodestroy', this.doDestroy);
this.picker.$on('pick', (date = '', visible = false) => { this.picker.$on('pick', (date = '', visible = false, user = true) => {
// do not emit if values are same // do not emit if values are same
if (!valueEquals(this.value, date)) { if (!valueEquals(this.value, date)) {
this.$emit('input', date); this.$emit('input', date);
if (user && this.value !== date) {
this.$nextTick(() => this.$emit('change', this.displayValue));
};
} }
this.pickerVisible = this.picker.visible = visible; this.pickerVisible = this.picker.visible = visible;
this.picker.resetView && this.picker.resetView(); this.picker.resetView && this.picker.resetView();

1
packages/date-picker/src/picker/date-picker.js
View File

@ -45,6 +45,7 @@ export default {
if (keyCode === 9 || keyCode === 27 || keyCode === 13) { if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
this.pickerVisible = false; this.pickerVisible = false;
event.stopPropagation(); event.stopPropagation();
this.picker.confirm();
this.currentValue = this.picker.date; this.currentValue = this.picker.date;
this.$refs.reference.$refs.input.blur(); this.$refs.reference.$refs.input.blur();
return; return;