From 7163edb75d463026c8f9b08319c5c5c7d17d2867 Mon Sep 17 00:00:00 2001
From: hugh <wuhaohuang@hotmail.com>
Date: Wed, 3 Apr 2024 11:04:26 +0800
Subject: [PATCH 1/2] feat(components): [date-pick] support footer slot of
 date-picker

---
 .../src/date-picker-com/panel-date-pick.vue   | 50 ++++++++++--------
 .../src/date-picker-com/panel-date-range.vue  | 51 +++++++++++--------
 .../date-picker/src/date-picker.tsx           |  6 ++-
 .../src/date-picker/picker-panel.scss         |  7 +++
 4 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue b/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
index 693dbb62e2435..2b0af866f62c0 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
@@ -159,26 +159,36 @@
         </div>
       </div>
     </div>
-    <div v-show="footerVisible" :class="ppNs.e('footer')">
-      <el-button
-        v-show="selectionMode !== 'dates' && selectionMode !== 'years'"
-        text
-        size="small"
-        :class="ppNs.e('link-btn')"
-        :disabled="disabledNow"
-        @click="changeToNow"
-      >
-        {{ t('el.datepicker.now') }}
-      </el-button>
-      <el-button
-        plain
-        size="small"
-        :class="ppNs.e('link-btn')"
-        :disabled="disabledConfirm"
-        @click="onConfirm"
-      >
-        {{ t('el.datepicker.confirm') }}
-      </el-button>
+    <div
+      v-show="footerVisible || slots.footer"
+      :class="[
+        { [ppNs.e('footer')]: showTime && !slots.footer },
+        { [ppNs.e('footer__slot')]: slots.footer },
+      ]"
+    >
+      <slot name="footer">
+        <template v-if="footerVisible">
+          <el-button
+            v-show="selectionMode !== 'dates' && selectionMode !== 'years'"
+            text
+            size="small"
+            :class="ppNs.e('link-btn')"
+            :disabled="disabledNow"
+            @click="changeToNow"
+          >
+            {{ t('el.datepicker.now') }}
+          </el-button>
+          <el-button
+            plain
+            size="small"
+            :class="ppNs.e('link-btn')"
+            :disabled="disabledConfirm"
+            @click="onConfirm"
+          >
+            {{ t('el.datepicker.confirm') }}
+          </el-button>
+        </template>
+      </slot>
     </div>
   </div>
 </template>
diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
index d132188fa7218..7804c97e344ad 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
@@ -226,31 +226,41 @@
         </div>
       </div>
     </div>
-    <div v-if="showTime" :class="ppNs.e('footer')">
-      <el-button
-        v-if="clearable"
-        text
-        size="small"
-        :class="ppNs.e('link-btn')"
-        @click="handleClear"
-      >
-        {{ t('el.datepicker.clear') }}
-      </el-button>
-      <el-button
-        plain
-        size="small"
-        :class="ppNs.e('link-btn')"
-        :disabled="btnDisabled"
-        @click="handleRangeConfirm(false)"
-      >
-        {{ t('el.datepicker.confirm') }}
-      </el-button>
+    <div
+      v-if="showTime || slots.footer"
+      :class="[
+        { [ppNs.e('footer')]: showTime && !slots.footer },
+        { [ppNs.e('footer__slot')]: slots.footer },
+      ]"
+    >
+      <slot name="footer">
+        <template v-if="showTime">
+          <el-button
+            v-if="clearable"
+            text
+            size="small"
+            :class="ppNs.e('link-btn')"
+            @click="handleClear"
+          >
+            {{ t('el.datepicker.clear') }}
+          </el-button>
+          <el-button
+            plain
+            size="small"
+            :class="ppNs.e('link-btn')"
+            :disabled="btnDisabled"
+            @click="handleRangeConfirm(false)"
+          >
+            {{ t('el.datepicker.confirm') }}
+          </el-button>
+        </template>
+      </slot>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, toRef, unref } from 'vue'
+import { computed, inject, ref, toRef, unref, useSlots } from 'vue'
 import dayjs from 'dayjs'
 import { ClickOutside as vClickoutside } from '@element-plus/directives'
 import { isArray } from '@element-plus/utils'
@@ -300,6 +310,7 @@ const defaultValue = toRef(pickerBase.props, 'defaultValue')
 const { lang } = useLocale()
 const leftDate = ref<Dayjs>(dayjs().locale(lang.value))
 const rightDate = ref<Dayjs>(dayjs().locale(lang.value).add(1, unit))
+const slots = useSlots()
 
 const {
   minDate,
diff --git a/packages/components/date-picker/src/date-picker.tsx b/packages/components/date-picker/src/date-picker.tsx
index 36276f20a194c..940067ad0c03d 100644
--- a/packages/components/date-picker/src/date-picker.tsx
+++ b/packages/components/date-picker/src/date-picker.tsx
@@ -81,7 +81,11 @@ export default defineComponent({
         >
           {{
             default: (scopedProps: /**FIXME: remove any type */ any) => (
-              <Component {...scopedProps} />
+              <Component {...scopedProps}>
+                {{
+                  footer: slots.footer ? slots.footer : undefined,
+                }}
+              </Component>
             ),
             'range-separator': slots['range-separator'],
           }}
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 64ab77ccd6811..0774ae66c4d29 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -36,6 +36,13 @@
     font-size: 0;
   }
 
+  @include e(footer__slot) {
+    border-top: 1px solid getCssVar('datepicker-inner-border-color');
+    padding: 4px 12px;
+    background-color: getCssVar('bg-color', 'overlay');
+    position: relative;
+  }
+
   @include e(shortcut) {
     display: block;
     width: 100%;

From 3ced0e18cff5535e7feebc469360c836c85d61da Mon Sep 17 00:00:00 2001
From: hugh <wuhaohuang@hotmail.com>
Date: Wed, 3 Apr 2024 13:36:24 +0800
Subject: [PATCH 2/2] test(components): [date-pick] cases with/without incoming
 footer slot

---
 .../date-picker/__tests__/date-picker.test.ts | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index 1e41efd4c1545..e692a741f3296 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -560,6 +560,52 @@ describe('DatePicker', () => {
     expect(!!text).toBeTruthy()
   })
 
+  it('footer slot', async () => {
+    const ParentComponent = {
+      components: {
+        'el-date-picker': DatePicker,
+      },
+      template: `
+        <el-date-picker
+          v-model="value"
+        >
+          <template #footer>
+            <div class="test-component">Test Component Content</div>
+          </template>
+        </el-date-picker>
+      `,
+      data() {
+        return { value: '' }
+      },
+    }
+
+    mount(ParentComponent)
+
+    expect(
+      document.querySelector('.el-picker-panel__footer__slot>.test-component')
+    ).toBeTruthy()
+  })
+
+  it('no footer slot', () => {
+    const ParentComponent = {
+      components: {
+        'el-date-picker': DatePicker,
+      },
+      template: `
+      <el-date-picker
+        v-model="value"
+      />
+    `,
+      data() {
+        return { value: '' }
+      },
+    }
+
+    mount(ParentComponent)
+
+    expect(document.querySelector('.el-picker-panel__footer__slot')).toBeNull()
+  })
+
   describe('value-format', () => {
     it('with literal string', async () => {
       const day = dayjs()