Reset panel selectionMode and positioning on blur

Sergio Crisostomo
1 parent 15457562
Showing 3 changed files with 21 additions and 10 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
@@ -185,26 +185,31 @@
                 const minDate = newVal[0] ? toDate(newVal[0]) : null;
                 const maxDate = newVal[1] ? toDate(newVal[1]) : null;
                 this.dates = [minDate, maxDate].sort();
-                if (JSON.stringify(this.dates) === '[null,null]') {
-                    const leftPanelDate = this.startDate || new Date();
-                    this.leftPanelDate = leftPanelDate,
-                    this.rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
-                }
  
                 this.rangeState = {
                     from: this.dates[0],
                     to: this.dates[1],
                     selecting: false
                 };
+
+
+                // set panels positioning
+                const leftPanelDate = this.startDate || this.dates[0] || new Date();
+                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();
                 const rightMonth = this.rightPanelDate.getMonth();
                 const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
  
-                this.leftPickerTable = `${currentView}-table`;
-                this.rightPickerTable = `${currentView}-table`;
-
                 if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
                     this.changePanelDate('right', 'Month', 1);
                 }
@@ -214,6 +219,10 @@
                 if (currentView === 'year' && isSameYear){
                     this.changePanelDate('right', 'FullYear', 10);
                 }
+            },
+            selectionMode(type){
+                console.log('Selection type change!', type);
+                this.currentView = type || 'range';
             }
         },
         methods: {
@@ -139,9 +139,10 @@
             value (newVal) {
                 this.dates = newVal;
                 if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
-            },
-            selectionMode(){
+
+                // reset stuff
                 this.currentView = this.selectionMode;
+                this.pickerTable = this.getTableType(this.currentView);
             },
             currentView (currentView) {
                 this.$emit('on-selection-mode-change', currentView);
@@ -237,6 +237,7 @@
             },
             handleBlur () {
                 this.visible = false;
+                this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
             },
             handleInputChange (event) {
                 const isArrayValue = this.type.includes('range') || this.multiple;