feat: calendar在线文档接入和国际化支持 (#168)

* feat: popup在线文档接入和国际化支持

* feat: 还原到主项目版本

* feat: calendar在线文档接入和国际化支持

src/packages/calendar/demo.tsx

-/*
- * @Author: your name
- * @Date: 2021-12-23 11:15:50
- * @LastEditTime: 2021-12-27 10:16:31
- * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /nutui-react/src/packages/calendar/demo.tsx
- */
 import React, { useState } from 'react'
 import { Calendar } from './calendar'
 import { Cell } from '@/packages/cell/cell'
+import { useTranslate } from '../../sites/assets/locale'
+
+interface T {
+  ce5c5446: string
+  c38a08ef: string
+  b840c88f: string
+  a74a1fd4: string
+  '8dab2f66': string
+  cfbdc781: string
+  c3a3a1d2: string
+  e51e4582: string
+  '7db1a8b2': string
+  a52bef0c: string
+  d04fcbda: string
+  '0aaad620': string
+  '60a53514': string
+  b8a453e3: string
+  '248be9e1': string
+  ea3d02f2: string
+  c9e6df49: string
+  '781b07fd': string
+  '1076d771': string
+  '6ab47cd2': string
+}
 
 const CalendarDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      ce5c5446: '基础用法',
+      c38a08ef: '选择单个日期',
+      b840c88f: '请选择',
+      a74a1fd4: '选择日期区间',
+      '8dab2f66': '至',
+      cfbdc781: '自定义日历-自动回填',
+      c3a3a1d2: '选择日期',
+      e51e4582: '平铺展示',
+      '7db1a8b2': '禁用状态',
+      a52bef0c: '加载状态',
+      d04fcbda: '加载中',
+      '0aaad620': '按钮尺寸',
+      '60a53514': '收藏',
+      b8a453e3: '大号按钮',
+      '248be9e1': '普通按钮',
+      ea3d02f2: '小型按钮',
+      c9e6df49: '块级元素',
+      '781b07fd': '自定义颜色',
+      '1076d771': '单色按钮',
+      '6ab47cd2': '渐变按钮',
+    },
+    'zh-TW': {
+      ce5c5446: '基礎翻譯',
+      c38a08ef: '選擇日期',
+      b840c88f: '請選擇',
+      a74a1fd4: '選擇日期區間',
+      '8dab2f66': '至',
+      cfbdc781: '自定義日曆-自動回填',
+      c3a3a1d2: '選擇日期',
+      e51e4582: '平鋪展示',
+      '7db1a8b2': '禁用狀態',
+      a52bef0c: '載入狀態',
+      d04fcbda: '載入中',
+      '0aaad620': '按鈕尺寸',
+      '60a53514': '收藏',
+      b8a453e3: '大號按鈕',
+      '248be9e1': '普通按鈕',
+      ea3d02f2: '小型按鈕',
+      c9e6df49: '塊級元素',
+      '781b07fd': '自定義顏色',
+      '1076d771': '單色按鈕',
+      '6ab47cd2': '漸變按鈕',
+    },
+    'en-US': {
+      ce5c5446: 'Basic usage',
+      c38a08ef: 'select a single date',
+      b840c88f: 'please choose',
+      a74a1fd4: 'Select date range',
+      '8dab2f66': 'to',
+      cfbdc781: 'Custom Calendar - Auto Backfill',
+      c3a3a1d2: 'select date',
+      e51e4582: 'Tiled display',
+      '7db1a8b2': 'Disabled State',
+      a52bef0c: 'Load State',
+      d04fcbda: 'Loading',
+      '0aaad620': 'Button size',
+      '60a53514': 'Favorite',
+      b8a453e3: 'Large button',
+      '248be9e1': 'Normal Button',
+      ea3d02f2: 'Mini Button',
+      c9e6df49: 'Block-level elements',
+      '781b07fd': 'Custom Colors',
+      '1076d771': 'Monochrome button',
+      '6ab47cd2': 'Gradient button',
+    },
+  })
   const [date, setDate] = useState('')
   const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
   const [date2, setDate2] = useState('2020-07-08')
@@ -65,10 +149,10 @@ const CalendarDemo = () => {
   return (
     <>
       <div className="demo">
-        <h2>基础用法</h2>
+        <h2>{translated.ce5c5446}</h2>
         <Cell
-          title="选择单个日期"
-          desc={date ? `${date} ${dateWeek}` : '请选择'}
+          title={translated.c38a08ef}
+          desc={date ? `${date} ${dateWeek}` : translated.b840c88f}
           onClick={openSwitch}
         />
         <Calendar
@@ -80,8 +164,12 @@ const CalendarDemo = () => {
           onChoose={setChooseValue}
         />
         <Cell
-          title="选择日期区间"
-          desc={date1 ? `${date1[0]}至${date1[1]}` : '请选择'}
+          title={translated.a74a1fd4}
+          desc={
+            date1
+              ? `${date1[0]}${translated['8dab2f66']}${date1[1]}`
+              : translated.b840c88f
+          }
           onClick={openSwitch1}
         />
         <Calendar
@@ -93,10 +181,10 @@ const CalendarDemo = () => {
           onClose={closeSwitch1}
           onChoose={setChooseValue1}
         />
-        <h2>自定义日历-自动回填</h2>
+        <h2>{translated.cfbdc781}</h2>
         <Cell
-          title="选择日期"
-          desc={date3 ? `${date3}` : '请选择'}
+          title={translated.c3a3a1d2}
+          desc={date3 ? `${date3}` : translated.b840c88f}
           onClick={openSwitch3}
         />
         <Calendar
@@ -108,7 +196,7 @@ const CalendarDemo = () => {
           onClose={closeSwitch3}
           onChoose={setChooseValue3}
         />
-        <h2>平铺展示</h2>
+        <h2>{translated.e51e4582}</h2>
         <div
           className="test-calendar-wrapper"
           style={{

src/packages/calendar/doc.en-US.md

-# Calendar 日历
+# Calendar
 
-### 介绍
+### introduce
 
-日历，可平铺/弹窗展示
+Calendar, tileable/pop-up display
 
-### 安装
+### Install
 
 ```javascript
 import { Calendar } from '@nutui/nutui-react';
 ```
 
-## 代码演示
-
-### 基础用法
-
-```jsx
-<Cell title="选择单个日期" desc={ date ? `${date} ${dateWeek}` : '请选择' } onClick={ openSwitch }></Cell>
-<Calendar 
-    visible={ isVisible }
-    defaultValue={ date }
-    startDate="2019-10-11"
-    endDate="2029-11-11"
-    onClose={ closeSwitch }
-    onChoose={ setChooseValue }
-></Calendar>
-```
+## code demo
+
+### Basic usage
+
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date, setDate] = useState('');
+    const [isVisible, setIsVisible] = useState(false);
+    const [dateWeek, setDateWeek] = useState('');
+
+    const openSwitch = () => {
+        setIsVisible(true);
+    }
+
+    const closeSwitch = () => {
+        setIsVisible(false);
+    }
+
+    const setChooseValue = (param: string) => {
+        setDate(param[3]);
+        setDateWeek(param[4]);
+    }
+    return (
+        <>
+            <Cell title="select a single date" desc={ date ? `${date} ${dateWeek}` : 'please choose' } onClick={ openSwitch }></Cell>
+            <Calendar 
+                visible={ isVisible }
+                defaultValue={ date }
+                startDate="2019-10-11"
+                endDate="2029-11-11"
+                onClose={ closeSwitch }
+                onChoose={ setChooseValue }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-### 区间选择
-
-```jsx
-<Cell title="选择日期区间" desc={ date1 ? `${date1[0]}至${date1[1]}` : '请选择' } onClick={ openSwitch1 }></Cell>
-<Calendar 
-    visible={ isVisible1 }
-    defaultValue={ date1 }
-    type="range"
-    startDate="2019-12-22"
-    endDate="2021-01-08"
-    onClose={ closeSwitch1 }
-    onChoose={ setChooseValue1 }
-></Calendar>
 ```
+:::
+
+### interval selection
+
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
+    const [isVisible1, setIsVisible1] = useState(false)
+
+    const openSwitch1 = () => {
+        setIsVisible1(true)
+    }
+
+    const closeSwitch1 = () => {
+        setIsVisible1(false)
+    }
+
+    const setChooseValue1 = (param: string) => {
+        setDate1([...[param[0][3], param[1][3]]])
+    }
+
+    return (
+        <>
+            <Cell title="Select date range" desc={ date1 ? `${date1[0]}to${date1[1]}` : 'please choose' } onClick={ openSwitch1 }></Cell>
+            <Calendar 
+                visible={ isVisible1 }
+                defaultValue={ date1 }
+                type="range"
+                startDate="2019-12-22"
+                endDate="2021-01-08"
+                onClose={ closeSwitch1 }
+                onChoose={ setChooseValue1 }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-### 自定义日历-自动回填
-
-```jsx
-<Cell title="选择日期" desc={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 }></Cell>
-<Calendar
-    visible={ isVisible3 }
-    defaultValue={ date3 }
-    startDate=""
-    endDate=""
-    isAutoBackFill={ true }
-    onClose={ closeSwitch3 }
-    onChoose={ setChooseValue3 }
-></Calendar>
 ```
+:::
+
+### Custom Calendar - Auto Backfill
+
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date3, setDate3] = useState('')
+    const [isVisible3, setIsVisible3] = useState(false)
+
+    const openSwitch3 = () => {
+        setIsVisible3(true)
+    }
+
+    const closeSwitch3 = () => {
+        setIsVisible3(false)
+    }
+
+    const setChooseValue3 = (param: string) => {
+        setDate3(param[3])
+    }
+
+    return (
+        <>
+            <Cell title="select date" desc={ date3 ? `${date3}` : 'please choose' } onClick={ openSwitch3 }></Cell>
+            <Calendar
+                visible={ isVisible3 }
+                defaultValue={ date3 }
+                startDate=""
+                endDate=""
+                isAutoBackFill={ true }
+                onClose={ closeSwitch3 }
+                onChoose={ setChooseValue3 }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-### 平铺展示
-
-```jsx
-<div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-<Calendar
-    poppable={ false }
-    defaultValue={ date2 }
-    isAutoBackFill
-    onChoose={ setChooseValue2 }
- />
-</div>
 ```
+:::
 
-```js
-const [date, setDate] = useState('');
-const [date1, setDate1] = useState(['2019-12-23', '2019-12-26']);
-const [date2, setDate2] = useState('2020-07-08');
-const [date3, setDate3] = useState('');
-const [dateWeek, setDateWeek] = useState('');
-const [isVisible, setIsVisible] = useState(false);
-const [isVisible1, setIsVisible1] = useState(false);
-const [isVisible3, setIsVisible3] = useState(false);
-
-const openSwitch = () => {
-    setIsVisible(true);
-}
-
-const openSwitch1 = () => {
-    setIsVisible1(true);
-}
-
-const openSwitch3 = () => {
-    setIsVisible3(true);
-}
-
-const closeSwitch = () => {
-    setIsVisible(false);
-}
-
-const closeSwitch1 = () => {
-    setIsVisible1(false);
-}
-
-const closeSwitch3 = () => {
-    setIsVisible3(false);
-}
-
-const setChooseValue = (param: string) => {
-    setDate(param[3]);
-    setDateWeek(param[4]);
-};
+### Tiled display
 
-const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]]);
-};
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Calendar } from '@nutui/nutui-react';
 
-const setChooseValue2 = (param: string) => {
-    setDate2(param[3]);
-    console.log(param[3]);
+const App = () => {
+    const [date2, setDate2] = useState('2020-07-08')
+
+    const setChooseValue2 = (param: string) => {
+        setDate2(param[3])
+    }
+
+    return (
+        <>
+            <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
+                <Calendar
+                    poppable={ false }
+                    defaultValue={ date2 }
+                    isAutoBackFill
+                    onChoose={ setChooseValue2 }
+                />
+            </div>
+        </>
+    );
 };
+export default App;
 
-const setChooseValue3 = (param: string) => {
-    setDate3(param[3]);
-};
 ```
+:::
 
 ## API
 
 ### Props
 
-| 字段              | 说明                                              | 类型            | 默认值          |
+| Params              | Description                                              | Type            | Default          |
 |-------------------|---------------------------------------------------|-----------------|-----------------|
-| visible   | 是否可见                                          | Boolean         | false           |
-| type              | 类型，日期选择'one'，区间选择'range'              | String          | 'one'           |
-| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
-| isAutoBackFill | 自动回填                                          | Boolean         | false           |
-| title             | 显示标题                                          | String          | ‘日期选择’      |
-| defaultValue     | 默认值，日期选择 String 格式，区间选择 Array 格式 | String 、 Array | null            |
-| startDate        | 开始日期， 如果不限制开始日期传 null              | String          | 今天            |
-| endDate          | 结束日期，如果不限制结束日期传 null               | String          | 距离今天 365 天 |
+| visible   | Is it visible                                          | Boolean         | false           |
+| type              | Type, select 'one' for date and 'range' for interval              | String          | 'one'           |
+| poppable          | Whether to display the pop-up window status                                  | Boolean         | true            |
+| isAutoBackFill | Automatic backfill                                          | Boolean         | false           |
+| title             | show title                                          | String          | ‘Date Pick’      |
+| defaultValue     | Default value, select String format for date, select Array format for interval | String 、 Array | null            |
+| startDate        | The start date, or null if the start date is not limited              | String          | Today            |
+| endDate          | The end date, or null if the end date is not limited               | String          | 365 days from today |
 
 ### Events
 
-| 事件名 | 说明                         | 回调参数                     |
+| Events | Description                         | callback parameter                     |
 |--------|------------------------------|------------------------------|
-| onChoose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
-| onClose  | 关闭时触发                   | -                            |
+| onChoose | Triggered after selection or by clicking the confirm button | Array of dates (including year, month, day and week) |
+| onClose  | Triggered when closed                   | -                            |

src/packages/calendar/doc.md

@@ -14,113 +14,164 @@ import { Calendar } from '@nutui/nutui-react';
 
 ### 基础用法
 
-```jsx
-<Cell title="选择单个日期" desc={ date ? `${date} ${dateWeek}` : '请选择' } onClick={ openSwitch }></Cell>
-<Calendar 
-    visible={ isVisible }
-    defaultValue={ date }
-    startDate="2019-10-11"
-    endDate="2029-11-11"
-    onClose={ closeSwitch }
-    onChoose={ setChooseValue }
-></Calendar>
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date, setDate] = useState('');
+    const [isVisible, setIsVisible] = useState(false);
+    const [dateWeek, setDateWeek] = useState('');
+
+    const openSwitch = () => {
+        setIsVisible(true);
+    }
+
+    const closeSwitch = () => {
+        setIsVisible(false);
+    }
+
+    const setChooseValue = (param: string) => {
+        setDate(param[3]);
+        setDateWeek(param[4]);
+    }
+    return (
+        <>
+            <Cell title="选择单个日期" desc={ date ? `${date} ${dateWeek}` : '请选择' } onClick={ openSwitch }></Cell>
+            <Calendar 
+                visible={ isVisible }
+                defaultValue={ date }
+                startDate="2019-10-11"
+                endDate="2029-11-11"
+                onClose={ closeSwitch }
+                onChoose={ setChooseValue }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
+
 ```
+:::
 
 ### 区间选择
 
-```jsx
-<Cell title="选择日期区间" desc={ date1 ? `${date1[0]}至${date1[1]}` : '请选择' } onClick={ openSwitch1 }></Cell>
-<Calendar 
-    visible={ isVisible1 }
-    defaultValue={ date1 }
-    type="range"
-    startDate="2019-12-22"
-    endDate="2021-01-08"
-    onClose={ closeSwitch1 }
-    onChoose={ setChooseValue1 }
-></Calendar>
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
+    const [isVisible1, setIsVisible1] = useState(false)
+
+    const openSwitch1 = () => {
+        setIsVisible1(true)
+    }
+
+    const closeSwitch1 = () => {
+        setIsVisible1(false)
+    }
+
+    const setChooseValue1 = (param: string) => {
+        setDate1([...[param[0][3], param[1][3]]])
+    }
+
+    return (
+        <>
+            <Cell title="选择日期区间" desc={ date1 ? `${date1[0]}至${date1[1]}` : '请选择' } onClick={ openSwitch1 }></Cell>
+            <Calendar 
+                visible={ isVisible1 }
+                defaultValue={ date1 }
+                type="range"
+                startDate="2019-12-22"
+                endDate="2021-01-08"
+                onClose={ closeSwitch1 }
+                onChoose={ setChooseValue1 }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
+
 ```
+:::
 
 ### 自定义日历-自动回填
 
-```jsx
-<Cell title="选择日期" desc={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 }></Cell>
-<Calendar
-    visible={ isVisible3 }
-    defaultValue={ date3 }
-    startDate=""
-    endDate=""
-    isAutoBackFill={ true }
-    onClose={ closeSwitch3 }
-    onChoose={ setChooseValue3 }
-></Calendar>
-```
-
-### 平铺展示
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date3, setDate3] = useState('')
+    const [isVisible3, setIsVisible3] = useState(false)
+
+    const openSwitch3 = () => {
+        setIsVisible3(true)
+    }
+
+    const closeSwitch3 = () => {
+        setIsVisible3(false)
+    }
+
+    const setChooseValue3 = (param: string) => {
+        setDate3(param[3])
+    }
+
+    return (
+        <>
+            <Cell title="选择日期" desc={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 }></Cell>
+            <Calendar
+                visible={ isVisible3 }
+                defaultValue={ date3 }
+                startDate=""
+                endDate=""
+                isAutoBackFill={ true }
+                onClose={ closeSwitch3 }
+                onChoose={ setChooseValue3 }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-```jsx
-<div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-<Calendar
-    poppable={ false }
-    defaultValue={ date2 }
-    isAutoBackFill
-    onChoose={ setChooseValue2 }
- />
-</div>
 ```
+:::
 
-```js
-const [date, setDate] = useState('');
-const [date1, setDate1] = useState(['2019-12-23', '2019-12-26']);
-const [date2, setDate2] = useState('2020-07-08');
-const [date3, setDate3] = useState('');
-const [dateWeek, setDateWeek] = useState('');
-const [isVisible, setIsVisible] = useState(false);
-const [isVisible1, setIsVisible1] = useState(false);
-const [isVisible3, setIsVisible3] = useState(false);
-
-const openSwitch = () => {
-    setIsVisible(true);
-}
-
-const openSwitch1 = () => {
-    setIsVisible1(true);
-}
-
-const openSwitch3 = () => {
-    setIsVisible3(true);
-}
-
-const closeSwitch = () => {
-    setIsVisible(false);
-}
-
-const closeSwitch1 = () => {
-    setIsVisible1(false);
-}
-
-const closeSwitch3 = () => {
-    setIsVisible3(false);
-}
-
-const setChooseValue = (param: string) => {
-    setDate(param[3]);
-    setDateWeek(param[4]);
-};
+### 平铺展示
 
-const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]]);
-};
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Calendar } from '@nutui/nutui-react';
 
-const setChooseValue2 = (param: string) => {
-    setDate2(param[3]);
-    console.log(param[3]);
+const App = () => {
+    const [date2, setDate2] = useState('2020-07-08')
+
+    const setChooseValue2 = (param: string) => {
+        setDate2(param[3])
+    }
+
+    return (
+        <>
+            <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
+                <Calendar
+                    poppable={ false }
+                    defaultValue={ date2 }
+                    isAutoBackFill
+                    onChoose={ setChooseValue2 }
+                />
+            </div>
+        </>
+    );
 };
+export default App;
 
-const setChooseValue3 = (param: string) => {
-    setDate3(param[3]);
-};
 ```
+:::
 
 ## API
 

src/packages/calendar/doc.zh-TW.md

-# Calendar 日历
+# Calendar 日曆
 
-### 介绍
+### 介紹
 
-日历，可平铺/弹窗展示
+日曆，可平鋪/彈窗展示
 
-### 安装
+### 安裝
 
 ```javascript
 import { Calendar } from '@nutui/nutui-react';
 ```
 
-## 代码演示
-
-### 基础用法
-
-```jsx
-<Cell title="选择单个日期" desc={ date ? `${date} ${dateWeek}` : '请选择' } onClick={ openSwitch }></Cell>
-<Calendar 
-    visible={ isVisible }
-    defaultValue={ date }
-    startDate="2019-10-11"
-    endDate="2029-11-11"
-    onClose={ closeSwitch }
-    onChoose={ setChooseValue }
-></Calendar>
-```
+## 代碼演示
+
+### 基礎用法
+
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date, setDate] = useState('');
+    const [isVisible, setIsVisible] = useState(false);
+    const [dateWeek, setDateWeek] = useState('');
+
+    const openSwitch = () => {
+        setIsVisible(true);
+    }
+
+    const closeSwitch = () => {
+        setIsVisible(false);
+    }
+
+    const setChooseValue = (param: string) => {
+        setDate(param[3]);
+        setDateWeek(param[4]);
+    }
+    return (
+        <>
+            <Cell title="選擇單個日期" desc={ date ? `${date} ${dateWeek}` : '請選擇' } onClick={ openSwitch }></Cell>
+            <Calendar 
+                visible={ isVisible }
+                defaultValue={ date }
+                startDate="2019-10-11"
+                endDate="2029-11-11"
+                onClose={ closeSwitch }
+                onChoose={ setChooseValue }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-### 区间选择
-
-```jsx
-<Cell title="选择日期区间" desc={ date1 ? `${date1[0]}至${date1[1]}` : '请选择' } onClick={ openSwitch1 }></Cell>
-<Calendar 
-    visible={ isVisible1 }
-    defaultValue={ date1 }
-    type="range"
-    startDate="2019-12-22"
-    endDate="2021-01-08"
-    onClose={ closeSwitch1 }
-    onChoose={ setChooseValue1 }
-></Calendar>
 ```
+:::
+
+### 區間選擇
+
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
+    const [isVisible1, setIsVisible1] = useState(false)
+
+    const openSwitch1 = () => {
+        setIsVisible1(true)
+    }
+
+    const closeSwitch1 = () => {
+        setIsVisible1(false)
+    }
+
+    const setChooseValue1 = (param: string) => {
+        setDate1([...[param[0][3], param[1][3]]])
+    }
+
+    return (
+        <>
+            <Cell title="選擇日期區間" desc={ date1 ? `${date1[0]}至${date1[1]}` : '請選擇' } onClick={ openSwitch1 }></Cell>
+            <Calendar 
+                visible={ isVisible1 }
+                defaultValue={ date1 }
+                type="range"
+                startDate="2019-12-22"
+                endDate="2021-01-08"
+                onClose={ closeSwitch1 }
+                onChoose={ setChooseValue1 }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-### 自定义日历-自动回填
-
-```jsx
-<Cell title="选择日期" desc={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 }></Cell>
-<Calendar
-    visible={ isVisible3 }
-    defaultValue={ date3 }
-    startDate=""
-    endDate=""
-    isAutoBackFill={ true }
-    onClose={ closeSwitch3 }
-    onChoose={ setChooseValue3 }
-></Calendar>
 ```
+:::
+
+### 自定義日曆-自動回填
+
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Cell, Calendar } from '@nutui/nutui-react';
+
+const App = () => {
+    const [date3, setDate3] = useState('')
+    const [isVisible3, setIsVisible3] = useState(false)
+
+    const openSwitch3 = () => {
+        setIsVisible3(true)
+    }
+
+    const closeSwitch3 = () => {
+        setIsVisible3(false)
+    }
+
+    const setChooseValue3 = (param: string) => {
+        setDate3(param[3])
+    }
+
+    return (
+        <>
+            <Cell title="選擇日期" desc={ date3 ? `${date3}` : '請選擇' } onClick={ openSwitch3 }></Cell>
+            <Calendar
+                visible={ isVisible3 }
+                defaultValue={ date3 }
+                startDate=""
+                endDate=""
+                isAutoBackFill={ true }
+                onClose={ closeSwitch3 }
+                onChoose={ setChooseValue3 }
+            ></Calendar>
+        </>
+    );
+};
+export default App;
 
-### 平铺展示
-
-```jsx
-<div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-<Calendar
-    poppable={ false }
-    defaultValue={ date2 }
-    isAutoBackFill
-    onChoose={ setChooseValue2 }
- />
-</div>
 ```
+:::
 
-```js
-const [date, setDate] = useState('');
-const [date1, setDate1] = useState(['2019-12-23', '2019-12-26']);
-const [date2, setDate2] = useState('2020-07-08');
-const [date3, setDate3] = useState('');
-const [dateWeek, setDateWeek] = useState('');
-const [isVisible, setIsVisible] = useState(false);
-const [isVisible1, setIsVisible1] = useState(false);
-const [isVisible3, setIsVisible3] = useState(false);
-
-const openSwitch = () => {
-    setIsVisible(true);
-}
-
-const openSwitch1 = () => {
-    setIsVisible1(true);
-}
-
-const openSwitch3 = () => {
-    setIsVisible3(true);
-}
-
-const closeSwitch = () => {
-    setIsVisible(false);
-}
-
-const closeSwitch1 = () => {
-    setIsVisible1(false);
-}
-
-const closeSwitch3 = () => {
-    setIsVisible3(false);
-}
-
-const setChooseValue = (param: string) => {
-    setDate(param[3]);
-    setDateWeek(param[4]);
-};
+### 平鋪展示
 
-const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]]);
-};
+:::demo
+```tsx
+import  React, { useState } from "react";
+import { Calendar } from '@nutui/nutui-react';
 
-const setChooseValue2 = (param: string) => {
-    setDate2(param[3]);
-    console.log(param[3]);
+const App = () => {
+    const [date2, setDate2] = useState('2020-07-08')
+
+    const setChooseValue2 = (param: string) => {
+        setDate2(param[3])
+    }
+
+    return (
+        <>
+            <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
+                <Calendar
+                    poppable={ false }
+                    defaultValue={ date2 }
+                    isAutoBackFill
+                    onChoose={ setChooseValue2 }
+                />
+            </div>
+        </>
+    );
 };
+export default App;
 
-const setChooseValue3 = (param: string) => {
-    setDate3(param[3]);
-};
 ```
+:::
 
 ## API
 
 ### Props
 
-| 字段              | 说明                                              | 类型            | 默认值          |
+| 字段              | 說明                                              | 類型            | 默認值          |
 |-------------------|---------------------------------------------------|-----------------|-----------------|
-| visible   | 是否可见                                          | Boolean         | false           |
-| type              | 类型，日期选择'one'，区间选择'range'              | String          | 'one'           |
-| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
-| isAutoBackFill | 自动回填                                          | Boolean         | false           |
-| title             | 显示标题                                          | String          | ‘日期选择’      |
-| defaultValue     | 默认值，日期选择 String 格式，区间选择 Array 格式 | String 、 Array | null            |
-| startDate        | 开始日期， 如果不限制开始日期传 null              | String          | 今天            |
-| endDate          | 结束日期，如果不限制结束日期传 null               | String          | 距离今天 365 天 |
+| visible   | 是否可見                                          | Boolean         | false           |
+| type              | 類型，日期選擇'one'，區間選擇'range'              | String          | 'one'           |
+| poppable          | 是否彈窗狀態展示                                  | Boolean         | true            |
+| isAutoBackFill | 自動回填                                          | Boolean         | false           |
+| title             | 顯示標題                                          | String          | ‘日期選擇’      |
+| defaultValue     | 默認值，日期選擇 String 格式，區間選擇 Array 格式 | String 、 Array | null            |
+| startDate        | 開始日期， 如果不限制開始日期傳 null              | String          | 今天            |
+| endDate          | 結束日期，如果不限制結束日期傳 null               | String          | 距離今天 365 天 |
 
 ### Events
 
 | 事件名 | 说明                         | 回调参数                     |
 |--------|------------------------------|------------------------------|
-| onChoose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
-| onClose  | 关闭时触发                   | -                            |
+| onChoose | 選擇之後或是點擊確認按鈕觸發 | 日期數組（包含年月日和星期） |
+| onClose  | 關閉時觸發                   | -                            |