fix: calendar日历组件完善功能

src/packages/calendar/demo.vue

@@ -39,13 +39,34 @@
       >
       </nut-calendar>
     </div>
-    <h2>自定义日历</h2>
+
+    <h2>自定义日历-自动回填</h2>
+    <div>
+      <nut-cell
+        :showIcon="true"
+        title="选择日期"
+        :desc="date3 ? date3 : '请选择'"
+        @click="openSwitch('isVisible3')"
+      >
+      </nut-cell>
+      <nut-calendar
+        :is-visible="isVisible3"
+        @close="closeSwitch('isVisible3')"
+        @choose="setChooseValue3"
+        :default-value="date3"
+        :start-date="null"
+        :end-date="null"
+        :is-auto-back-fill="true"
+      >
+      </nut-calendar>
+    </div>
+
     <h2>平铺展示</h2>
     <div class="test-calendar-wrapper">
       <nut-calendar
         :poppable="false"
-        :is-visible="isVisible2"
         :default-value="date2"
+        :is-auto-back-fill="true"
         @choose="setChooseValue2"
       >
       </nut-calendar>
@@ -64,12 +85,11 @@ interface TestCalendarState {
   isVisible: boolean;
   date: string;
   dateWeek: string;
-
-  date2: string;
-  isVisible2: boolean;
-
   isVisible1: boolean;
   date1: string[];
+  date2: string;
+  isVisible3: boolean;
+  date3: string;
 }
 export default createDemo({
   props: {},
@@ -79,11 +99,13 @@ export default createDemo({
       date: '',
       dateWeek: '',
 
+      isVisible1: false,
+      date1: ['2019-12-23', '2019-12-26'],
+
       date2: '2020-07-08',
-      isVisible2: true,
 
-      isVisible1: false,
-      date1: ['2019-12-23', '2019-12-26']
+      isVisible3: false,
+      date3: ''
     });
     const openSwitch = param => {
       state[`${param}`] = true;
@@ -98,22 +120,27 @@ export default createDemo({
       state.dateWeek = param[4];
     };
 
+    const setChooseValue1 = param => {
+      state.date1 = [...[param[0][3], param[1][3]]];
+    };
+
     const setChooseValue2 = param => {
       state.date2 = param[3];
       console.log(state.date2);
     };
 
-    const setChooseValue1 = param => {
-      state.date1 = [...[param[0][3], param[1][3]]];
+    const setChooseValue3 = param => {
+      state.date3 = param[3];
     };
 
     return {
       ...toRefs(state),
       openSwitch,
       closeSwitch,
       setChooseValue,
+      setChooseValue1,
       setChooseValue2,
-      setChooseValue1
+      setChooseValue3
     };
   }
 });

src/packages/calendar/doc.md

@@ -1,34 +1,212 @@
-#  calendar组件
-
-    ### 介绍
-
-    基于 xxxxxxx
-
-    ### 安装
-
-
-
-    ## 代码演示
-
-    ### 基础用法1
-
-
-
-    ## API
-
-    ### Props
-
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
-
-    ### Events
-
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
-
+# calendar 组件
+
+### 介绍
+
+日历，可平铺/弹窗展示
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Calendar } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Calendar);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<nut-cell
+  :showIcon="true"
+  title="选择单个日期"
+  :desc="date ? `${date} ${dateWeek}` : '请选择'"
+  @click="openSwitch('isVisible')"
+>
+</nut-cell>
+<nut-calendar
+  :is-visible="isVisible"
+  :default-value="date"
+  @close="closeSwitch('isVisible')"
+  @choose="setChooseValue"
+  :start-date="`2019-10-11`"
+  :end-date="`2022-11-11`"
+>
+</nut-calendar>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      isVisible: false,
+      date: '',
+      dateWeek: ''
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+    const setChooseValue = param => {
+      state.date = param[3];
+      state.dateWeek = param[4];
+    };
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue
+    };
+  }
+```
+
+### 区间选择
+
+```html
+<nut-cell
+  :showIcon="true"
+  title="选择日期区间"
+  :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
+  @click="openSwitch('isVisible')"
+>
+</nut-cell>
+<nut-calendar
+  :is-visible="isVisible"
+  :default-value="date"
+  type="range"
+  :start-date="`2019-12-22`"
+  :end-date="`2021-01-08`"
+  @close="closeSwitch('isVisible')"
+  @choose="setChooseValue"
+>
+</nut-calendar>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      date: ['2019-12-23', '2019-12-26'],
+      isVisible2: true
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+    const setChooseValue= param => {
+      state.date = [...[param[0][3], param[1][3]]];
+    };
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue,
+    };
+  }
+```
+
+### 自定义日历-自动回填
+
+```html
+<nut-cell
+  :showIcon="true"
+  title="选择日期"
+  :desc="date ? date : '请选择'"
+  @click="openSwitch('isVisible')"
+>
+</nut-cell>
+<nut-calendar
+  :is-visible="isVisible"
+  @close="closeSwitch('isVisible')"
+  @choose="setChooseValue"
+  :start-date="null"
+  :end-date="null"
+  :is-auto-back-fill="true"
+>
+</nut-calendar>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      date: '',
+      isVisible: false
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+     const setChooseValue = param => {
+      state.date= param[3];
+    };
+    return {
+      ...toRefs(state),
+      setChooseValue
+    };
+  }
+```
+
+### 平铺展示
+
+```html
+<div class="test-calendar-wrapper">
+  <nut-calendar
+    :poppable="false"
+    :is-auto-back-fill="true"
+    :default-value="date"
+    @choose="setChooseValue"
+  >
+  </nut-calendar
+></div>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      date: '2020-07-08'
+    });
+    const setChooseValue = param => {
+      state.date = param[3];
+    };
+    return {
+      ...toRefs(state),
+      setChooseValue
+    };
+  }
+```
+
+### 基础用法
+
+```html
+
+```
+
+```javascript
+```
+
+## API
+
+### Props
+
+| 字段              | 说明                                              | 类型           | 默认值          |
+| ----------------- | ------------------------------------------------- | -------------- | --------------- |
+| type              | 类型，日期选择'one'，区间选择'range'              | String         | 'one'           |
+| is-visible        | 是否可见                                          | Boolean        | false           |
+| poppable          | 是否弹窗状态展示                                  | Boolean        | true            |
+| is-auto-back-fill | 自动回填                                          | Boolean        | false           |
+| title             | 显示标题                                          | String         | ‘日期选择’      |
+| default-value     | 默认值，日期选择 String 格式，区间选择 Array 格式 | String / Array | null            |
+| start-date        | 开始日期， 如果不限制开始日期传 null              | String         | 今天            |
+| end-date          | 结束日期，如果不限制结束日期传 null               | String         | 距离今天 365 天 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| choose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期）
+| close | 关闭时触发 | -