diff --git a/.changeset/itchy-planets-brush.md b/.changeset/itchy-planets-brush.md
new file mode 100644
index 000000000..4d31aa2b4
--- /dev/null
+++ b/.changeset/itchy-planets-brush.md
@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+style: date picker panel row main axis between
diff --git a/src/date-picker/calendar/header/style.scss b/src/date-picker/calendar/header/style.scss
index a80b3a177..0fa8a9ef1 100644
--- a/src/date-picker/calendar/header/style.scss
+++ b/src/date-picker/calendar/header/style.scss
@@ -13,23 +13,35 @@ $block: aui-calendar-header;
   &__nav-content {
     flex: 1;
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     font-size: use-var(font-size-l);
     color: use-text-color(main);
     font-weight: use-var(font-weight-bolder);
 
-    a {
+    .separator {
+      margin: 0 use-var(spacing-s);
+    }
+
+    .aui-button--text {
       color: use-text-color(main);
 
+      .aui-button__content {
+        font-size: use-var(font-size-l);
+        font-weight: use-var(font-weight-bolder);
+        padding: 0;
+      }
+
       &:hover {
+        background-color: transparent;
         color: use-rgb(primary);
         text-decoration: none !important;
       }
-    }
 
-    a + a {
-      margin-left: 5px;
+      + .aui-button--text {
+        margin-left: 0;
+      }
     }
   }
 }
diff --git a/src/date-picker/calendar/header/template.html b/src/date-picker/calendar/header/template.html
index f3c428d62..51cedfb9d 100644
--- a/src/date-picker/calendar/header/template.html
+++ b/src/date-picker/calendar/header/template.html
@@ -17,30 +17,35 @@
     *ngIf="dateNavRange === DateNavRange.Month"
     [class]="bem.element('nav-content')"
   >
-    <a
-      href="javascript:;"
+    <button
+      aui-button="text"
       (click)="clickNav(DateNavRange.Year)"
     >
       {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
-    </a>
-    <a
-      href="javascript:;"
+    </button>
+    <div class="separator">
+      <span *ngIf="!('year_suffix' | auiI18n) && !('month_suffix' | auiI18n)">
+        /
+      </span>
+    </div>
+    <button
+      aui-button="text"
       (click)="clickNav(DateNavRange.Month)"
     >
       {{ headerRange?.start?.month() + 1 }}{{ 'month_suffix' | auiI18n }}
-    </a>
+    </button>
   </span>
 
   <span
     *ngIf="dateNavRange === DateNavRange.Year"
     [class]="bem.element('nav-content')"
   >
-    <a
-      href="javascript:;"
+    <button
+      aui-button="text"
       (click)="clickNav(DateNavRange.Year)"
     >
       {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
-    </a>
+    </button>
   </span>
 
   <span
diff --git a/src/date-picker/calendar/panel/picker-panel.style.scss b/src/date-picker/calendar/panel/picker-panel.style.scss
index 0b47ba56d..a138c1fe2 100644
--- a/src/date-picker/calendar/panel/picker-panel.style.scss
+++ b/src/date-picker/calendar/panel/picker-panel.style.scss
@@ -61,6 +61,7 @@ $left-mask-shadow: -12px 0 0 0 use-rgb(popper-bg);
     flex: 1;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     @include text-set(m);
 
     width: 100%;