diff --git a/docs/examples/date-picker/date-range.vue b/docs/examples/date-picker/date-range.vue
index 71c6744bb2..60bd8ed5f3 100644
--- a/docs/examples/date-picker/date-range.vue
+++ b/docs/examples/date-picker/date-range.vue
@@ -1,4 +1,11 @@
 <template>
+  <div>
+    <el-radio-group v-model="size" label="size control">
+      <el-radio-button label="large">large</el-radio-button>
+      <el-radio-button label="default">default</el-radio-button>
+      <el-radio-button label="small">small</el-radio-button>
+    </el-radio-group>
+  </div>
   <div class="demo-date-picker">
     <div class="block">
       <span class="demonstration">Default</span>
@@ -8,6 +15,7 @@
         range-separator="To"
         start-placeholder="Start date"
         end-placeholder="End date"
+        :size="size"
       />
     </div>
     <div class="block">
@@ -20,6 +28,7 @@
         start-placeholder="Start date"
         end-placeholder="End date"
         :shortcuts="shortcuts"
+        :size="size"
       />
     </div>
   </div>
@@ -28,6 +37,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+const size = ref<'' | 'large' | 'small'>('')
+
 const value1 = ref('')
 const value2 = ref('')
 
diff --git a/docs/examples/date-picker/enter-date.vue b/docs/examples/date-picker/enter-date.vue
index 51e826a55c..8ec1981e3d 100644
--- a/docs/examples/date-picker/enter-date.vue
+++ b/docs/examples/date-picker/enter-date.vue
@@ -1,8 +1,20 @@
 <template>
+  <div>
+    <el-radio-group v-model="size" label="size control">
+      <el-radio-button label="large">large</el-radio-button>
+      <el-radio-button label="default">default</el-radio-button>
+      <el-radio-button label="small">small</el-radio-button>
+    </el-radio-group>
+  </div>
   <div class="demo-date-picker">
     <div class="block">
       <span class="demonstration">Default</span>
-      <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
+      <el-date-picker
+        v-model="value1"
+        type="date"
+        placeholder="Pick a day"
+        :size="size"
+      />
     </div>
     <div class="block">
       <span class="demonstration">Picker with quick options</span>
@@ -12,6 +24,7 @@
         placeholder="Pick a day"
         :disabled-date="disabledDate"
         :shortcuts="shortcuts"
+        :size="size"
       />
     </div>
   </div>
@@ -20,6 +33,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+const size = ref<'' | 'large' | 'small'>('')
+
 const value1 = ref('')
 const value2 = ref('')
 
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 6ba1a17684..26f0999d4b 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -39,7 +39,7 @@
   &.#{$namespace}-input,
   &.#{$namespace}-input__wrapper {
     width: getCssVar('date-editor-width');
-    height: getCssVar('component-size', '');
+    height: var(#{getCssVarName('input-height')}, getCssVar('component-size'));
   }
 
   @include m((monthrange)) {