From 90d901af3ed760c8a3c54881213d53360ebf02cd Mon Sep 17 00:00:00 2001
From: 0song <82012629+0song@users.noreply.github.com>
Date: Wed, 28 Jul 2021 20:12:10 +0800
Subject: [PATCH] fix: date-time picker sameday select time bug (#2747)

---
 .../__tests__/date-time-picker.spec.ts        | 57 +++++++++++++++++++
 .../src/date-picker-com/panel-date-range.vue  | 10 +++-
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/__tests__/date-time-picker.spec.ts b/packages/date-picker/__tests__/date-time-picker.spec.ts
index 6e0d59385b..40c4a3e8f0 100644
--- a/packages/date-picker/__tests__/date-time-picker.spec.ts
+++ b/packages/date-picker/__tests__/date-time-picker.spec.ts
@@ -499,4 +499,61 @@ describe('Datetimerange', () => {
       .map(node => Number(node.textContent))
     expect(disabledHours2).toStrictEqual(disabledHoursRightArr)
   })
+
+  it('select same date, different time', async () => {
+    const leftSelect = ['10', '59', '59']
+    const wrapper = _mount(`<el-date-picker
+        v-model="value"
+        type="datetimerange"
+    />`, () => ({
+      value: '',
+    }))
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    const pickers = document.querySelectorAll('.el-date-range-picker__content')
+    const leftCell = pickers[0].querySelector('td.available')
+    triggerEvent(leftCell, 'mousemove', true)
+    triggerEvent(leftCell, 'click', true)
+    await nextTick()
+    triggerEvent(leftCell, 'mousemove', true)
+    triggerEvent(leftCell, 'click', true)
+    await nextTick()
+    const leftTimeInput = document.querySelectorAll('.el-date-range-picker__editors-wrap input')[1] as HTMLInputElement
+    leftTimeInput.blur()
+    leftTimeInput.focus()
+    await nextTick()
+    const leftList = document.querySelectorAll('.el-time-spinner__list')
+    triggerEvent(leftList[0].children[+leftSelect[0]], 'click', true)
+    await nextTick()
+    triggerEvent(leftList[1].children[+leftSelect[1]], 'click', true)
+    await nextTick()
+    triggerEvent(leftList[2].children[+leftSelect[2]], 'click', true)
+    await nextTick();
+    (document.querySelector('.el-time-panel__btn.confirm') as HTMLElement).click()
+    await nextTick()
+    const rightTimeInput = document.querySelectorAll('.el-date-range-picker__editors-wrap input')[3] as HTMLInputElement
+    rightTimeInput.blur()
+    rightTimeInput.focus()
+    await nextTick()
+    const rightList = document.querySelectorAll('.is-right .el-time-spinner__list')
+    // auto set left time to right time
+    expect(rightList[0].querySelector('.el-time-spinner__item.active').innerHTML).toBe(leftSelect[0])
+    expect(rightList[1].querySelector('.el-time-spinner__item.active').innerHTML).toBe(leftSelect[1])
+    expect(rightList[2].querySelector('.el-time-spinner__item.active').innerHTML).toBe(leftSelect[2])
+    triggerEvent(rightList[0].children[12], 'click', true)
+    await nextTick()
+    triggerEvent(rightList[1].children[12], 'click', true)
+    await nextTick()
+    triggerEvent(rightList[2].children[12], 'click', true)
+    await nextTick();
+    (document.querySelector('.is-right .el-time-panel__btn.confirm') as HTMLElement).click()
+    await nextTick();
+    (document.querySelector('.el-picker-panel__footer .el-button--default') as HTMLElement).click()
+    await nextTick()
+    const vm = wrapper.vm as any
+    expect(vm.value.map(_ => dayjs(_).format('HH:mm:ss')))
+      .toStrictEqual(['10:59:59', '12:12:12'])
+  })
 })
diff --git a/packages/date-picker/src/date-picker-com/panel-date-range.vue b/packages/date-picker/src/date-picker-com/panel-date-range.vue
index dd06c7b294..361ce11046 100644
--- a/packages/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/date-picker/src/date-picker-com/panel-date-range.vue
@@ -527,8 +527,7 @@ export default defineComponent({
 
       if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
         maxDate.value = minDate.value
-        rightDate.value = maxDate.value
-        rightDate.value = rightDate.value.add(1, 'month')
+        rightDate.value = value
       }
     }
 
@@ -545,7 +544,6 @@ export default defineComponent({
 
       if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
         minDate.value = maxDate.value
-        leftDate.value = minDate.value
       }
     }
 
@@ -616,6 +614,12 @@ export default defineComponent({
             : maxDate.value
         } else {
           rightDate.value = leftDate.value.add(1, 'month')
+          if (maxDate.value) {
+            rightDate.value = rightDate.value
+              .hour(maxDate.value.hour())
+              .minute(maxDate.value.minute())
+              .second(maxDate.value.second())
+          }
         }
       } else {
         const defaultArr = getDefaultValue()