DatePicker: panels should display different months (#9471)

packages/date-picker/src/panel/date-range.vue

@@ -395,9 +395,17 @@
           //       should allow them to be set individually in the future
           if (this.minDate) {
             this.leftDate = this.minDate;
-            this.rightDate = this.unlinkPanels && this.maxDate
+            if (this.unlinkPanels && this.maxDate) {
-              ? this.maxDate
+              const minDateYear = this.minDate.getFullYear();
-              : nextMonth(this.leftDate);
+              const minDateMonth = this.minDate.getMonth();
+              const maxDateYear = this.maxDate.getFullYear();
+              const maxDateMonth = this.maxDate.getMonth();
+              this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth
+                ? nextMonth(this.maxDate)
+                : this.maxDate;
+            } else {
+              this.rightDate = nextMonth(this.leftDate);
+            }
           } else {
             this.leftDate = calcDefaultValue(this.defaultValue)[0];
             this.rightDate = nextMonth(this.leftDate);

test/unit/specs/date-picker.spec.js

@@ -1144,6 +1144,32 @@ describe('DatePicker', () => {
       }, DELAY);
     });
 
+    it('type:daterange unlink:true', done => {
+      vm = createVue({
+        template: '<el-date-picker type="daterange" unlink-panels v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2000, 9, 1), new Date(2000, 9, 2)]
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      setTimeout(_ => {
+        inputs[0].focus();
+        setTimeout(_ => {
+          const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+          const left = panels[0].querySelector('.el-date-range-picker__header');
+          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');
+          const leftText = left.textContent.match(/\d+/g).map(i => Number(i));
+          const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+          expect(rightText[1] - leftText[1]).to.equal(1); // one month
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
     it('unlink panels', done => {
       vm = createTest(DatePicker, {
         type: 'daterange',