diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 19e9e25cdd..57ecc0d725 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -917,6 +917,17 @@ $--datepicker: map.merge(
   $--datepicker
 );
 
+$--date-editor: () !default;
+$--date-editor: map.merge(
+  (
+    'width': 220px,
+    'monthrange-width': 300px,
+    'daterange-width': 350px,
+    'datetimerange-width': 400px,
+  ),
+  $--date-editor
+);
+
 /* Loading
 --------------------------*/
 // css3 var in packages/theme-chalk/src/loading.scss
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 142f942f9a..fd9ef21ed5 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -1,13 +1,14 @@
 @use "sass:map";
 
 @import '../mixins/mixins';
+@import '../mixins/var';
 @import '../common/var';
 @import '../common/transition';
 
 @include b(picker) {
   @include e(popper) {
     @include picker-popper(
-      $--color-white,
+      var(--el-color-white),
       1px solid var(--el-datepicker-border-color),
       var(--el-box-shadow-light)
     );
@@ -15,33 +16,35 @@
 }
 
 @include b(date-editor) {
+  @include set-component-css-var('date-editor', $--date-editor);
+
   position: relative;
   display: inline-block;
   text-align: left;
 
   &.#{$namespace}-input,
   &.#{$namespace}-input__inner {
-    width: 220px;
+    width: var(--el-date-editor-width);
   }
 
   @include m((monthrange)) {
     &.#{$namespace}-input,
     &.#{$namespace}-input__inner {
-      width: 300px;
+      width: var(--el-date-editor-monthrange-width);
     }
   }
 
   @include m((daterange, timerange)) {
     &.#{$namespace}-input,
     &.#{$namespace}-input__inner {
-      width: 350px;
+      width: var(--el-date-editor-daterange-width);
     }
   }
 
   @include m(datetimerange) {
     &.#{$namespace}-input,
     &.#{$namespace}-input__inner {
-      width: 400px;
+      width: var(--el-date-editor-datetimerange-width);
     }
   }