diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue index b11951e..c7057d8 100644 --- a/src/components/date-picker/panel/Date/date-range.vue +++ b/src/components/date-picker/panel/Date/date-range.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: { diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue index f69a2d0..c65d9c2 100644 --- a/src/components/date-picker/panel/Date/date.vue +++ b/src/components/date-picker/panel/Date/date.vue @@ -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); diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue index 2a0449c..16d2c4c 100644 --- a/src/components/date-picker/picker.vue +++ b/src/components/date-picker/picker.vue @@ -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; -- libgit2 0.21.4