fix(date-picker): modify the judgment logic of startDate and endDate (#1322)

packages/date-picker/__tests__/date-picker.spec.ts

@@ -475,6 +475,43 @@ describe('DateRangePicker', () => {
     expect(vm.value[0].getTime() < vm.value[1].getTime()).toBeTruthy()
   })
 
+  it('range, start-date and end-date', async () => {
+    _mount(`<el-date-picker
+      type='daterange'
+      v-model="value"
+    />`, () => ({ value: '' }))
+
+    const table = document.querySelector('.el-date-table')
+    const availableTds = (table as HTMLTableElement).querySelectorAll('td.available');
+
+    (availableTds[0] as HTMLElement).click()
+    await nextTick();
+    (availableTds[1] as HTMLElement).click()
+    await nextTick()
+
+    expect(availableTds[0].classList.contains('in-range')).toBeTruthy()
+    expect(availableTds[0].classList.contains('start-date')).toBeTruthy()
+    expect(availableTds[1].classList.contains('in-range')).toBeTruthy()
+    expect(availableTds[1].classList.contains('end-date')).toBeTruthy();
+
+    (availableTds[1] as HTMLElement).click()
+    await nextTick();
+    (availableTds[0] as HTMLElement).click()
+    await nextTick()
+
+    expect(availableTds[0].classList.contains('in-range')).toBeTruthy()
+    expect(availableTds[0].classList.contains('start-date')).toBeTruthy()
+    expect(availableTds[1].classList.contains('in-range')).toBeTruthy()
+    expect(availableTds[1].classList.contains('end-date')).toBeTruthy()
+
+    const startDate = document.querySelectorAll('.start-date')
+    const endDate = document.querySelectorAll('.end-date')
+    const inRangeDate = document.querySelectorAll('.in-range')
+    expect(startDate.length).toBe(1)
+    expect(endDate.length).toBe(1)
+    expect(inRangeDate.length).toBe(2)
+  })
+
   it('unlink:true', async () => {
     const wrapper = _mount(`<el-date-picker
       type='daterange'
@@ -562,6 +599,44 @@ describe('MonthRange', () => {
     expect(vm.value[0].getTime() < vm.value[1].getTime()).toBeTruthy()
   })
 
+  it('range, start-date and end-date', async () => {
+    _mount(`<el-date-picker
+      type='monthrange'
+      v-model="value"
+    />`, () => ({ value: '' }))
+
+    const table = document.querySelector('.el-month-table')
+    const tds = (table as HTMLTableElement).querySelectorAll('td');
+
+    (tds[0] as HTMLElement).click()
+    await nextTick();
+    (tds[1] as HTMLElement).click()
+    await nextTick()
+
+    expect(tds[0].classList.contains('in-range')).toBeTruthy()
+    expect(tds[0].classList.contains('start-date')).toBeTruthy()
+    expect(tds[1].classList.contains('in-range')).toBeTruthy()
+    expect(tds[1].classList.contains('end-date')).toBeTruthy();
+
+    (tds[1] as HTMLElement).click()
+    await nextTick();
+    (tds[0] as HTMLElement).click()
+    await nextTick()
+
+    expect(tds[0].classList.contains('in-range')).toBeTruthy()
+    expect(tds[0].classList.contains('start-date')).toBeTruthy()
+    expect(tds[1].classList.contains('in-range')).toBeTruthy()
+    expect(tds[1].classList.contains('end-date')).toBeTruthy()
+
+    const startDate = document.querySelectorAll('.start-date')
+    const endDate = document.querySelectorAll('.end-date')
+    const inRangeDate = document.querySelectorAll('.in-range')
+    expect(startDate.length).toBe(1)
+    expect(endDate.length).toBe(1)
+    expect(inRangeDate.length).toBe(2)
+  })
+
+
   it('type:monthrange unlink:true', async () => {
     const wrapper = _mount(`<el-date-picker
       type='monthrange'

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

@@ -163,12 +163,21 @@ export default defineComponent({
               calTime.isSameOrAfter(props.minDate, 'day')
           ) && (calEndDate &&
               calTime.isSameOrBefore(calEndDate, 'day')
+          ) || (
+            props.minDate &&
+            calTime.isSameOrBefore(props.minDate, 'day')
+          ) && (calEndDate &&
+            calTime.isSameOrAfter(calEndDate, 'day')
           )
 
-          cell.start = props.minDate
-            && calTime.isSame(props.minDate, 'day')
+          if (props.minDate?.isSameOrAfter(calEndDate)) {
+            cell.start = calEndDate && calTime.isSame(calEndDate, 'day')
+            cell.end = props.minDate && calTime.isSame(props.minDate, 'day')
+          } else {
+            cell.start = props.minDate && calTime.isSame(props.minDate, 'day')
+            cell.end = calEndDate && calTime.isSame(calEndDate, 'day')
+          }
 
-          cell.end = calEndDate && calTime.isSame(calEndDate, 'day')
           const isToday = calTime.isSame(calNow, 'day')
 
           if (isToday) {

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

@@ -104,11 +104,21 @@ export default defineComponent({
             && (
               calEndDate &&
                 calTime.isSameOrBefore(calEndDate, 'month')
+            )) || (
+            props.minDate &&
+            calTime.isSameOrBefore(props.minDate, 'month')
+            && (
+              calEndDate &&
+              calTime.isSameOrAfter(calEndDate, 'month')
             ))
 
-          cell.start = props.minDate && calTime.isSame(props.minDate, 'month')
-
-          cell.end = calEndDate && calTime.isSame(calEndDate, 'month')
+          if (props.minDate?.isSameOrAfter(calEndDate)) {
+            cell.start = calEndDate && calTime.isSame(calEndDate, 'month')
+            cell.end = props.minDate && calTime.isSame(props.minDate, 'month')
+          } else {
+            cell.start = props.minDate && calTime.isSame(props.minDate, 'month')
+            cell.end = calEndDate && calTime.isSame(calEndDate, 'month')
+          }
 
           const isToday = now.isSame(calTime)