diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less
index a7d1138692..d6da652db5 100644
--- a/style/web/components/date-picker/_index.less
+++ b/style/web/components/date-picker/_index.less
@@ -47,12 +47,12 @@
   }
 }
 
-.@{prefix}-date-picker__panel--content,
-.@{prefix}-date-range-picker__panel--content,
-.@{prefix}-date-range-picker__panel--content-wrapper {
+.@{prefix}-date-picker__panel-content,
+.@{prefix}-date-range-picker__panel-content,
+.@{prefix}-date-range-picker__panel-content-wrapper {
   display: flex;
 }
-.@{prefix}-date-range-picker__panel--content-wrapper {
+.@{prefix}-date-range-picker__panel-content-wrapper {
   gap: 6px;
 }
 
@@ -67,11 +67,11 @@
     display: inline-flex;
     gap: @spacer;
 
-    .@{prefix}-date-picker__header-controller--month {
+    .@{prefix}-date-picker__header-controller-month {
       width: @datepicker-month-controller-width;
     }
 
-    .@{prefix}-date-picker__header-controller--year {
+    .@{prefix}-date-picker__header-controller-year {
       width: @datepicker-year-controller-width;
     }
   }
@@ -154,8 +154,8 @@
   }
 }
 
-.@{prefix}-date-picker__panel--time,
-.@{prefix}-date-range-picker__panel--time {
+.@{prefix}-date-picker__panel-time,
+.@{prefix}-date-range-picker__panel-time {
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -176,9 +176,9 @@
   }
 }
 
-.@{prefix}-date-picker__panel--year,
-.@{prefix}-date-picker__panel--month,
-.@{prefix}-date-picker__panel--date {
+.@{prefix}-date-picker__panel-year,
+.@{prefix}-date-picker__panel-month,
+.@{prefix}-date-picker__panel-date {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -187,9 +187,9 @@
   max-width: @datepicker-panel-max-width;
 }
 
-.@{prefix}-date-picker__panel--year,
-.@{prefix}-date-picker__panel--month {
-  .@{prefix}-date-picker__header-controller--year {
+.@{prefix}-date-picker__panel-year,
+.@{prefix}-date-picker__panel-month {
+  .@{prefix}-date-picker__header-controller-year {
     width: 130px;
   }