diff --git a/src/panels/MonthPanel/MonthHeader.tsx b/src/panels/MonthPanel/MonthHeader.tsx
index 15571ddaa..58e44b77e 100644
--- a/src/panels/MonthPanel/MonthHeader.tsx
+++ b/src/panels/MonthPanel/MonthHeader.tsx
@@ -34,21 +34,13 @@ function MonthHeader<DateType>(props: MonthHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevYear}
       onSuperNext={onNextYear}
     >
-      <button
-        type="button"
-        key="year"
-        onClick={onYearClick}
-        className={`${prefixCls}-year-btn`}
-      >
-        {generateConfig.locale.format(
-          locale.locale,
-          viewDate,
-          locale.yearFormat,
-        )}
+      <button type="button" onClick={onYearClick} className={`${prefixCls}-year-btn`}>
+        {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)}
       </button>
     </Header>
   );
diff --git a/src/panels/QuarterPanel/QuarterHeader.tsx b/src/panels/QuarterPanel/QuarterHeader.tsx
index 5a288ca69..8c94d2e94 100644
--- a/src/panels/QuarterPanel/QuarterHeader.tsx
+++ b/src/panels/QuarterPanel/QuarterHeader.tsx
@@ -31,10 +31,14 @@ function QuarterHeader<DateType>(props: QuarterHeaderProps<DateType>) {
   }
 
   const headerPrefixCls = `${prefixCls}-header`;
-
   return (
-    <Header prefixCls={headerPrefixCls} onSuperPrev={onPrevYear} onSuperNext={onNextYear}>
-      <button type="button" key="year" onClick={onYearClick} className={`${prefixCls}-year-btn`}>
+    <Header
+      {...props}
+      prefixCls={headerPrefixCls}
+      onSuperPrev={onPrevYear}
+      onSuperNext={onNextYear}
+    >
+      <button type="button" onClick={onYearClick} className={`${prefixCls}-year-btn`}>
         {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)}
       </button>
     </Header>
diff --git a/src/panels/YearPanel/YearHeader.tsx b/src/panels/YearPanel/YearHeader.tsx
index a9442a4a4..3c60aab9a 100644
--- a/src/panels/YearPanel/YearHeader.tsx
+++ b/src/panels/YearPanel/YearHeader.tsx
@@ -16,14 +16,7 @@ export interface YearHeaderProps<DateType> {
 }
 
 function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
-  const {
-    prefixCls,
-    generateConfig,
-    viewDate,
-    onPrevDecade,
-    onNextDecade,
-    onDecadeClick,
-  } = props;
+  const { prefixCls, generateConfig, viewDate, onPrevDecade, onNextDecade, onDecadeClick } = props;
   const { hideHeader } = React.useContext(PanelContext);
   if (hideHeader) {
     return null;
@@ -32,8 +25,7 @@ function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
   const headerPrefixCls = `${prefixCls}-header`;
 
   const yearNumber = generateConfig.getYear(viewDate);
-  const startYear =
-    Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
+  const startYear = Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
   const endYear = startYear + YEAR_DECADE_COUNT - 1;
 
   return (
@@ -43,12 +35,7 @@ function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
       onSuperPrev={onPrevDecade}
       onSuperNext={onNextDecade}
     >
-      <button
-        type="button"
-        key="year"
-        onClick={onDecadeClick}
-        className={`${prefixCls}-decade-btn`}
-      >
+      <button type="button" onClick={onDecadeClick} className={`${prefixCls}-decade-btn`}>
         {startYear}-{endYear}
       </button>
     </Header>