Fix panels reset on blur and

Sergio Crisostomo
1 parent bcf09be7
Showing 3 changed files with 23 additions and 13 deletions Show diff stats
src/components/date-picker/panel/Date/date-range.vue
src/components/date-picker/panel/Date/date.vue
src/components/date-picker/picker.vue
@@ -198,12 +198,6 @@
                 this.leftPanelDate = leftPanelDate;
                 const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
                 this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
-
-                // reset stuff
-                this.currentView = this.selectionMode || 'range';
-                this.leftPickerTable = `${this.currentView}-table`;
-                this.rightPickerTable = `${this.currentView}-table`;
-
             },
             currentView(currentView){
                 const leftMonth = this.leftPanelDate.getMonth();
@@ -225,6 +219,11 @@
             }
         },
         methods: {
+            reset(){
+                this.currentView = this.selectionMode;
+                this.leftPickerTable = `${this.currentView}-table`;
+                this.rightPickerTable = `${this.currentView}-table`;
+            },
             panelLabelConfig (direction) {
                 const locale = this.t('i.locale');
                 const datePanelLabel = this.t('i.datepicker.datePanelLabel');
@@ -139,17 +139,21 @@
             value (newVal) {
                 this.dates = newVal;
                 if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
-
-                // reset stuff
-                this.currentView = this.selectionMode;
-                this.pickerTable = this.getTableType(this.currentView);
             },
             currentView (currentView) {
                 this.$emit('on-selection-mode-change', currentView);
                 this.pickertable = this.getTableType(currentView);
+            },
+            selectionMode(type){
+                this.currentView = type;
+                this.pickerTable = this.getTableType(type);
             }
         },
         methods: {
+            reset(){
+                this.currentView = this.selectionMode;
+                this.pickerTable = this.getTableType(this.currentView);
+            },
             changeYear(dir){
                 if (this.selectionMode === 'year'){
                     this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
@@ -35,6 +35,7 @@
                 <div>
                     <component
                         :is="panel"
+                        ref="pickerPanel"
                         :visible="visible"
                         :showTime="type === 'datetime' || type === 'datetimerange'"
                         :confirm="isConfirm"
@@ -212,10 +213,9 @@
         },
         methods: {
             onSelectionModeChange(type){
-
                 if (type.match(/^date/)) type = 'date';
-                this.selectionMode = type;
-                return type;
+                this.selectionMode = oneOf(type, ['year', 'month', 'date', 'time']) && type;
+                return this.selectionMode;
             },
             // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
             handleTransferClick () {
@@ -237,7 +237,12 @@
             },
             handleBlur () {
                 this.visible = false;
+                this.onSelectionModeChange(this.type);
                 this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
+                this.reset();
+            },
+            reset(){
+                this.$refs.pickerPanel.reset && this.$refs.pickerPanel.reset();
             },
             handleInputChange (event) {
                 const isArrayValue = this.type.includes('range') || this.multiple;
@@ -280,6 +285,7 @@
                 this.$emit('on-clear');
                 this.dispatch('FormItem', 'on-form-change', '');
                 this.emitChange();
+                this.reset();
                 setTimeout(
                     () => this.onSelectionModeChange(this.type),
@@ -354,6 +360,7 @@
             onPickSuccess(){
                 this.visible = false;
                 this.$emit('on-ok');
+                this.reset();
             },
         },
         watch: {