From a7056174175451228f1358c777bf44c8765fb13e Mon Sep 17 00:00:00 2001
From: Haoxin Yang <1810849666@qq.com>
Date: Wed, 12 Jun 2024 18:07:57 +0800
Subject: [PATCH 1/3] style: date picker panel row main axis between

---
 src/date-picker/calendar/panel/picker-panel.style.scss | 1 +
 1 file changed, 1 insertion(+)

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%;

From e83e52cdf4d37726c35c3673080b93c74af0e4a3 Mon Sep 17 00:00:00 2001
From: Mrlang <1810849666@qq.com>
Date: Wed, 12 Jun 2024 18:17:18 +0800
Subject: [PATCH 2/3] Create itchy-planets-brush.md

---
 .changeset/itchy-planets-brush.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/itchy-planets-brush.md

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

From 65c6c0aff180784087b32c021a11e57c4dd5109b Mon Sep 17 00:00:00 2001
From: Haoxin Yang <1810849666@qq.com>
Date: Thu, 13 Jun 2024 13:34:06 +0800
Subject: [PATCH 3/3] feat: mod picker panel header separator and style

---
 src/date-picker/calendar/header/style.scss    | 20 ++++++++++++----
 src/date-picker/calendar/header/template.html | 23 +++++++++++--------
 2 files changed, 30 insertions(+), 13 deletions(-)

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