-
+
@@ -70,27 +73,28 @@
},
watch: {
- hours(newVal, oldVal) {
+ hoursPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 23)) {
- this.hours = oldVal;
+ this.hoursPrivate = oldVal;
}
- this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
+ this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
+
this.$emit('change', { hours: newVal });
},
- minutes(newVal, oldVal) {
+ minutesPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) {
- this.minutes = oldVal;
+ this.minutesPrivate = oldVal;
}
- this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
+ this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
this.$emit('change', { minutes: newVal });
},
- seconds(newVal, oldVal) {
+ secondsPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) {
- this.seconds = oldVal;
+ this.secondsPrivate = oldVal;
}
- this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+ this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
this.$emit('change', { seconds: newVal });
}
},
@@ -101,9 +105,17 @@
}
},
+ data() {
+ return {
+ hoursPrivate: 0,
+ minutesPrivate: 0,
+ secondsPrivate: 0
+ };
+ },
+
methods: {
focusEditor(type) {
- const editor = this.$els[type + 'Editor'];
+ const editor = this.$refs[type + 'Editor'];
if (editor) {
editor.focus();
}
@@ -114,7 +126,7 @@
return;
}
- this[type] = value.value >= 0 ? value.value : value;
+ this[type + 'Private'] = value.value >= 0 ? value.value : value;
this.emitSelectRange(type);
},
@@ -130,9 +142,9 @@
},
ajustScrollTop() {
- this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
- this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
- this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+ this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
+ this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
+ this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
}
}
};
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index 032667605..0cc480b71 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -26,7 +26,7 @@
type="text"
class="el-date-picker__editor">
@@ -75,7 +75,7 @@
:disabled-date="disabledDate">
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index 6d9564061..02c7b8a51 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -8,7 +8,7 @@
@@ -34,12 +34,6 @@
},
props: {
- date: {
- default() {
- return new Date();
- }
- },
-
format: {
default: 'HH:mm:ss'
},
@@ -61,51 +55,18 @@
}
},
+ data() {
+ return {
+ date: new Date(),
+ hours: 0,
+ minutes: 0,
+ seconds: 0
+ };
+ },
+
computed: {
showSeconds() {
return (this.format || '').indexOf('ss') !== -1;
- },
-
- hours: {
- get() {
- if (this.date) {
- return this.date.getHours();
- }
- return 0;
- },
- set(hours) {
- if (this.date) {
- this.date.setHours(hours);
- }
- }
- },
-
- minutes: {
- get() {
- if (this.date) {
- return this.date.getMinutes();
- }
- return 0;
- },
- set(minutes) {
- if (this.date) {
- this.date.setMinutes(minutes);
- }
- }
- },
-
- seconds: {
- get() {
- if (this.date) {
- return this.date.getSeconds();
- }
- return 0;
- },
- set(seconds) {
- if (this.date) {
- this.date.setSeconds(seconds);
- }
- }
}
},
@@ -115,9 +76,19 @@
},
handleChange(date) {
- if (date.hours !== undefined) this.hours = date.hours;
- if (date.minutes !== undefined) this.minutes = date.minutes;
- if (date.seconds !== undefined) this.seconds = date.seconds;
+ if (date.hours !== undefined) {
+ this.date.setHours(date.hours);
+ this.hours = this.date.getHours();
+ }
+ if (date.minutes !== undefined) {
+ this.date.setMinutes(date.minutes);
+ this.minutes = this.date.getMinutes();
+ }
+ if (date.seconds !== undefined) {
+ this.date.setSeconds(date.seconds);
+ this.seconds = this.date.getSeconds();
+ }
+
this.handleConfirm(true);
},
@@ -147,7 +118,13 @@
}
},
- ready() {
+ created() {
+ this.hours = this.date.getHours();
+ this.minutes = this.date.getMinutes();
+ this.seconds = this.date.getSeconds();
+ },
+
+ mounted() {
this.$refs.spinner.selectableRange = this.selectableRange;
this.$nextTick(() => this.handleConfirm(true, true));
}
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index b0fdc217a..fafe13347 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -1,31 +1,29 @@
+ @keydown="handleKeydown"
+ @keyup="handleKeyup"
+ ref="reference"
+ v-model.lazy="visualValue" />
@@ -33,6 +31,7 @@