From e262ae8133d3a0c84d82aefa39b9f10b5b51f794 Mon Sep 17 00:00:00 2001
From: hsk-kr <57546034+hsk-kr@users.noreply.github.com>
Date: Thu, 7 Jul 2022 00:29:57 +0900
Subject: [PATCH] docs: fix customize calendar example (#36356)

* docs: fix customize calendar example

* test: changed calendar snapshot

Co-authored-by: lico <lico@licoui-MacBookPro.local>
---
 .../__snapshots__/demo-extend.test.ts.snap    |  4 ++--
 components/calendar/demo/customize-header.md  | 23 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 75b231e364..d4148c549c 100644
--- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3481,8 +3481,8 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
                             />
                           </div>
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option year-item"
+                            aria-selected="true"
+                            class="ant-select-item ant-select-item-option year-item ant-select-item-option-selected"
                             title="2016"
                           >
                             <div
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
index 969d40efc5..5714d4103f 100644
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@@ -41,16 +41,16 @@ const App: React.FC = () => {
             months.push(localeData.monthsShort(current));
           }
 
-          for (let index = start; index < end; index++) {
+          for (let i = start; i < end; i++) {
             monthOptions.push(
-              <Select.Option className="month-item" key={`${index}`}>
-                {months[index]}
+              <Select.Option key={i} value={i} className="month-item">
+                {months[i]}
               </Select.Option>,
             );
           }
-          const month = value.month();
-
+          
           const year = value.year();
+          const month = value.month();
           const options = [];
           for (let i = year - 10; i < year + 10; i += 1) {
             options.push(
@@ -78,11 +78,11 @@ const App: React.FC = () => {
                     size="small"
                     dropdownMatchSelectWidth={false}
                     className="my-year-select"
+                    value={year}
                     onChange={newYear => {
-                      const now = value.clone().year(Number(newYear));
+                      const now = value.clone().year(newYear);
                       onChange(now);
                     }}
-                    value={String(year)}
                   >
                     {options}
                   </Select>
@@ -91,11 +91,10 @@ const App: React.FC = () => {
                   <Select
                     size="small"
                     dropdownMatchSelectWidth={false}
-                    value={String(month)}
-                    onChange={selectedMonth => {
-                      const newValue = value.clone();
-                      newValue.month(parseInt(selectedMonth, 10));
-                      onChange(newValue);
+                    value={month}
+                    onChange={newMonth => {
+                      const now = value.clone().month(newMonth);
+                      onChange(now);
                     }}
                   >
                     {monthOptions}