date-picker: fix first-day-of-week computation (#14523)

Fixes #14523

packages/date-picker/src/basic/date-table.vue

@@ -137,7 +137,6 @@
         const offset = this.offsetDay;
         const rows = this.tableRows;
         let count = 1;
-        let firstDayPosition;
 
         const startDate = this.startDate;
         const disabledDate = this.disabledDate;
@@ -173,21 +172,17 @@
             }
 
             if (i >= 0 && i <= 1) {
-              if (j + i * 7 >= (day + offset)) {
+              const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset;
+
+              if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
                 cell.text = count++;
-                if (count === 2) {
-                  firstDayPosition = i * 7 + j;
-                }
               } else {
-                cell.text = dateCountOfLastMonth - (day + offset - j % 7) + 1 + i * 7;
+                cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
                 cell.type = 'prev-month';
               }
             } else {
               if (count <= dateCountOfMonth) {
                 cell.text = count++;
-                if (count === 2) {
-                  firstDayPosition = i * 7 + j;
-                }
               } else {
                 cell.text = count++ - dateCountOfMonth;
                 cell.type = 'next-month';
@@ -213,8 +208,6 @@
           }
         }
 
-        rows.firstDayPosition = firstDayPosition;
-
         return rows;
       }
     },

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

@@ -2670,4 +2670,50 @@ describe('DatePicker', () => {
       }, DELAY);
     });
   });
+
+  describe('picker-options:firstDayOfWeek especial', () => {
+    let vm;
+    beforeEach(done => {
+      vm = createTest(DatePicker, {
+        value: new Date(),
+        pickerOptions: {
+          firstDayOfWeek: 3
+        }
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(done, DELAY);
+    });
+
+    afterEach(() => destroyVM(vm));
+
+    it('set value equal to 2019-01-01', done => {
+      const date = new Date('2019-01-01');
+      vm.picker.value = date;
+
+      setTimeout(_ => {
+        const currentElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(7) span');
+        const lastPrevMonthElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(6) span');
+        expect(currentElement.innerText.trim()).to.equal('1');
+        expect(lastPrevMonthElement.innerText.trim()).to.equal('31');
+        done();
+      }, DELAY);
+    });
+
+    it('set value equal to 2018-01-01', done => {
+      const date = new Date('2018-01-01');
+      vm.picker.value = date;
+
+      setTimeout(_ => {
+        const currentElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(6) span');
+        const lastPrevMonthElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(5) span');
+        expect(currentElement.innerText.trim()).to.equal('1');
+        expect(lastPrevMonthElement.innerText.trim()).to.equal('31');
+        done();
+      }, DELAY);
+    });
+  });
 });