From 2606778d3039f6ece639c2e269006416ef117574 Mon Sep 17 00:00:00 2001
From: 0song <82012629+0song@users.noreply.github.com>
Date: Tue, 11 Jan 2022 14:27:45 +0800
Subject: [PATCH] fix: fix DateRangePicker custom style & class bug (#5300)

---
 .../date-picker/__tests__/date-picker.spec.ts | 26 ++++++++++++++-----
 .../time-picker/src/common/picker.vue         |  2 ++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/components/date-picker/__tests__/date-picker.spec.ts b/packages/components/date-picker/__tests__/date-picker.spec.ts
index 0deab0957f..7cbc27b961 100644
--- a/packages/components/date-picker/__tests__/date-picker.spec.ts
+++ b/packages/components/date-picker/__tests__/date-picker.spec.ts
@@ -842,16 +842,21 @@ describe('DatePicker keyboard events', () => {
 })
 
 describe('DateRangePicker', () => {
-  it('create', async () => {
+  it('create & custom class & style', async () => {
     let calendarChangeValue = null
     const changeHandler = jest.fn()
+    const popperClassName = 'popper-class-test'
+    const customClassName = 'custom-class-test'
     const wrapper = _mount(
       `<el-date-picker
-    type='daterange'
-    v-model="value"
-    @CalendarChange="onCalendarChange"
-  />`,
-      () => ({ value: '' }),
+        type='daterange'
+        v-model="value"
+        @calendarChange="onCalendarChange"
+        :style="{color:'red'}"
+        :class="customClassName"
+        :popperClass="popperClassName"
+      />`,
+      () => ({ value: '', popperClassName, customClassName }),
       {
         methods: {
           onCalendarChange(e) {
@@ -866,6 +871,9 @@ describe('DateRangePicker', () => {
     inputs[0].trigger('focus')
     await nextTick()
 
+    const outterInput = wrapper.find('.el-range-editor.el-input__inner')
+    expect(outterInput.classes()).toContain(customClassName)
+    expect(outterInput.attributes().style).toBeDefined()
     const panels = document.querySelectorAll('.el-date-range-picker__content')
     expect(panels.length).toBe(2)
     ;(panels[0].querySelector('td.available') as HTMLElement).click()
@@ -875,6 +883,12 @@ describe('DateRangePicker', () => {
     inputs[0].trigger('blur')
     inputs[0].trigger('focus')
     await nextTick()
+    // popperClassName
+    expect(
+      document
+        .querySelector('.el-picker__popper')
+        .classList.contains(popperClassName)
+    ).toBe(true)
     // correct highlight
     const startDate = document.querySelectorAll('.start-date')
     const endDate = document.querySelectorAll('.end-date')
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 82672098c8..11fdf467d3 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -68,7 +68,9 @@
           pickerSize ? `el-range-editor--${pickerSize}` : '',
           pickerDisabled ? 'is-disabled' : '',
           pickerVisible ? 'is-active' : '',
+          $attrs.class || undefined,
         ]"
+        :style="$attrs.style || undefined"
         @click="handleFocus"
         @mouseenter="onMouseEnter"
         @mouseleave="onMouseLeave"