diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index a9b121dc032..214671b34fc 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -510,3 +510,4 @@ When picking a date range, you can assign the time part for start date and end d
 | Name    | Description |
 |---------|-------------|
 | range-separator  | custom range separator content |
+| sidebar | Date panel side slot |
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
index 59074c05871..e7ebe328b32 100644
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
@@ -510,3 +510,4 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | Nombre          | Descripción                           |
 | --------------- | ------------------------------------- |
 | range-separator | Separador de los rangos personalizado |
+| sidebar | Ranura lateral del panel de fecha |
diff --git a/examples/docs/fr-FR/date-picker.md b/examples/docs/fr-FR/date-picker.md
index cc94f2e4057..89ab1a0980e 100644
--- a/examples/docs/fr-FR/date-picker.md
+++ b/examples/docs/fr-FR/date-picker.md
@@ -489,3 +489,4 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
 | Nom    | Description |
 |---------|-------------|
 | range-separator  | Séparateur d'intervalle personnalisé. |
+| sidebar | Fentes latérales du panneau de date |
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index 2d3871e981c..dc041d363ee 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -457,3 +457,9 @@
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
 | focus | 使 input 获取焦点 | — |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| range-separator | 区间分隔符插槽 |
+| sidebar | 日期面板侧边插槽 |
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index 7423bb46cfc..1db9565b8da 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -8,14 +8,18 @@
         'has-time': showTime
       }, popperClass]">
       <div class="el-picker-panel__body-wrapper">
-        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
-        <div class="el-picker-panel__sidebar" v-if="shortcuts">
-          <button
-            type="button"
-            class="el-picker-panel__shortcut"
-            v-for="(shortcut, key) in shortcuts"
-            :key="key"
-            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+        <div class="el-picker-panel__sidebar">
+          <template v-if="shortcuts">
+            <button
+              type="button"
+              class="el-picker-panel__shortcut"
+              v-for="(shortcut, key) in shortcuts"
+              :key="key"
+              @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+          </template>
+          <template v-if="$slots.sidebar">
+            <slot name="sidebar"></slot>
+          </template>
         </div>
         <div class="el-picker-panel__body">
           <div class="el-date-range-picker__time-header" v-if="showTime">
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index a0fa95b6328..dd9155aa965 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -8,14 +8,18 @@
         'has-time': showTime
       }, popperClass]">
       <div class="el-picker-panel__body-wrapper">
-        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
-        <div class="el-picker-panel__sidebar" v-if="shortcuts">
-          <button
-            type="button"
-            class="el-picker-panel__shortcut"
-            v-for="(shortcut, key) in shortcuts"
-            :key="key"
-            @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
+        <div class="el-picker-panel__sidebar">
+          <template v-if="shortcuts">
+            <button
+              type="button"
+              class="el-picker-panel__shortcut"
+              v-for="(shortcut, key) in shortcuts"
+              :key="key"
+              @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
+          </template>
+          <template v-if="$slots.sidebar">
+            <slot name="sidebar"></slot>
+          </template>
         </div>
         <div class="el-picker-panel__body">
           <div class="el-date-picker__time-header" v-if="showTime">
diff --git a/packages/date-picker/src/panel/month-range.vue b/packages/date-picker/src/panel/month-range.vue
index d491e31321d..2317b6e4b3e 100644
--- a/packages/date-picker/src/panel/month-range.vue
+++ b/packages/date-picker/src/panel/month-range.vue
@@ -7,14 +7,18 @@
         'has-sidebar': $slots.sidebar || shortcuts
       }, popperClass]">
       <div class="el-picker-panel__body-wrapper">
-        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
-        <div class="el-picker-panel__sidebar" v-if="shortcuts">
-          <button
-            type="button"
-            class="el-picker-panel__shortcut"
-            v-for="(shortcut, key) in shortcuts"
-            :key="key"
-            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+        <div class="el-picker-panel__sidebar">
+          <template v-if="shortcuts">
+            <button
+              type="button"
+              class="el-picker-panel__shortcut"
+              v-for="(shortcut, key) in shortcuts"
+              :key="key"
+              @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+          </template>
+          <template v-if="$slots.sidebar">
+            <slot name="sidebar"></slot>
+          </template>
         </div>
         <div class="el-picker-panel__body">
           <div class="el-picker-panel__content el-date-range-picker__content is-left">