fix: 日历组件demo修改，文档修改

src/packages/__VUE/calendar/demo.vue

@@ -123,14 +123,14 @@
         <template v-slot:btn>
           <div class="wrapper">
             <div class="d_div">
-              <span class="d_btn" @click="goDate">{{ translate('goDate') }}</span></div
-            >
+              <span class="d_btn" @click="goDate">{{ translate('goDate') }}</span>
+            </div>
             <div class="d_div">
-              <span class="d_btn" @click="clickBtn">{{ translate('seven') }}</span></div
-            >
+              <span class="d_btn" @click="clickBtn">{{ translate('seven') }}</span>
+            </div>
             <div class="d_div">
-              <span class="d_btn" @click="clickBtn1">{{ translate('current') }}</span></div
-            >
+              <span class="d_btn" @click="clickBtn1">{{ translate('current') }}</span>
+            </div>
           </div>
         </template>
         <template v-slot:day="date">
@@ -187,7 +187,14 @@
     </div>
     <h2>{{ translate('title4') }}</h2>
     <div class="test-calendar-wrapper">
-      <nut-calendar :poppable="false" :default-value="date2" :is-auto-back-fill="true" @choose="setChooseValue2">
+      <nut-calendar
+        :poppable="false"
+        :default-value="date2"
+        :is-auto-back-fill="true"
+        @choose="setChooseValue2"
+        :start-date="`2020-02-01`"
+        :end-date="`2020-12-30`"
+      >
       </nut-calendar>
     </div>
   </div>
@@ -366,7 +373,7 @@ export default createDemo({
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate('2022-04-01');
+        calendarRef.value.scrollToDate(Utils.date2Str(new Date()));
       }
     };
     const renderDate = (date: { date: Day }) => {

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

@@ -32,8 +32,8 @@ app.use(Calendar);
     :default-value="date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :start-date="`2019-10-11`"
-    :end-date="`2022-11-11`"
+    :start-date="`2022-01-11`"
+    :end-date="`2022-11-30`"
   >
   </nut-calendar>
 </template>
@@ -500,9 +500,8 @@ export default {
   <nut-cell
     :showIcon="true"
     title="Custom First Day Of Week"
-    :desc="date ? `${date} ${dateWeek}` : 'Please Select Date'"
+    :desc="date ? `${date}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
-    :first-day-of-week="2"
   >
   </nut-cell>
   <nut-calendar
@@ -510,8 +509,7 @@ export default {
     :default-value="date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :start-date="`2019-10-11`"
-    :end-date="`2022-11-11`"
+    :first-day-of-week="2"
   >
   </nut-calendar>
 </template>
@@ -522,7 +520,6 @@ export default {
     const state = reactive({
       isVisible: false,
       date: '',
-      dateWeek: ''
     });
     const openSwitch = param => {
       state[`${param}`] = true;
@@ -532,7 +529,6 @@ export default {
     };
     const setChooseValue = param => {
       state.date = param[3];
-      state.dateWeek = param[4];
     };
     return {
       ...toRefs(state),
@@ -552,10 +548,12 @@ export default {
 <template>
   <div class="test-calendar-wrapper" >
     <nut-calendar
-        :poppable="false"
-        :default-value="date"
-        :is-auto-back-fill="true"
-        @choose="setChooseValue"
+      :poppable="false"
+      :default-value="date"
+      :is-auto-back-fill="true"
+      @choose="setChooseValue"
+      :start-date="`2020-02-01`"
+      :end-date="`2020-12-30`"
     >
     </nut-calendar>
   </div>
@@ -565,7 +563,7 @@ import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
-      date: '2022-07-08'
+      date: '2020-07-08'
     });
     const setChooseValue = param => {
       state.date = param[3];

src/packages/__VUE/calendar/doc.md

@@ -32,8 +32,8 @@ app.use(Calendar);
     :default-value="date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :start-date="`2019-10-11`"
-    :end-date="`2022-11-11`"
+    :start-date="`2022-01-11`"
+    :end-date="`2022-11-30`"
   >
   </nut-calendar>
 </template>
@@ -295,18 +295,26 @@ export default {
   >
   </nut-cell>
   <nut-calendar
+    ref="calendarRef"
     v-model:visible="isVisible"
     :default-value="date"
     type="range"
-    :start-date="`2021-12-22`"
-    :end-date="`2022-12-31`"
+    :start-date="null"
+    :end-date="null"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
     <template v-slot:btn>
       <div class="wrapper">
-        <div class="d_div"> <span class="d_btn" @click="clickBtn">最近七天</span></div>
-        <div class="d_div"> <span class="d_btn" @click="clickBtn1">当月</span></div>
+        <div class="d_div">
+          <span class="d_btn" @click="goDate">去某个时间</span>
+        </div>
+        <div class="d_div"> 
+          <span class="d_btn" @click="clickBtn">最近七天</span>
+        </div>
+        <div class="d_div"> 
+          <span class="d_btn" @click="clickBtn1">当月</span>
+        </div>
       </div>
     </template>
     <template v-slot:day="date">
@@ -316,13 +324,14 @@ export default {
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { reactive, toRefs, ref } from 'vue';
 export default {
   setup() {
     const state = reactive({
-      date: ['2021-12-23', '2021-12-26'],
+      date: [],
       isVisible: false
     });
+    const calendarRef = ref(null);
     const getNumTwoBit = function(n: number): string {
       n = Number(n);
       return (n > 9 ? '' : '0') + n;
@@ -375,7 +384,7 @@ export default {
     };
     const clickBtn = (param: string) => {
       let date = [date2Str(new Date()), getDay(6)];
-      state.date5 = date;
+      state.date = date;
     };
     const clickBtn1 = (param: string) => {
       let date = new Date();
@@ -384,7 +393,12 @@ export default {
       month = month < 10 ? '0' + month : month + '';
       let yearMonth = `${year}-${month}`;
       let currMonthDays = getMonthDays(year + '', month + '');
-      state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+      state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+    };
+    const goDate = () => {
+      if (calendarRef.value) {
+        calendarRef.value.scrollToDate(Utils.date2Str(new Date()));
+      }
     };
     return {
       ...toRefs(state),
@@ -392,6 +406,8 @@ export default {
       openSwitch,
       closeSwitch,
       clickBtn,
+      calendarRef,
+      goDate,
       clickBtn1
     };
   }
@@ -448,7 +464,7 @@ export default {
       <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
     </template>
     <template v-slot:bottomInfo="date">
-      <span class="info" style="fontSize:12px;lineHeight:14px">{{
+      <span class="info" >{{
         date.date ? (date.date.day == 10 ? '十' :  '') : ''
       }}</span>
     </template>
@@ -491,9 +507,9 @@ export default {
   <nut-cell
     :showIcon="true"
     title="自定义周起始日"
-    :desc="date ? `${date} ${dateWeek}` : '请选择'"
+    :desc="date ? `${date}` : '请选择'"
     @click="openSwitch('isVisible')"
-    :first-day-of-week="2"
+    
   >
   </nut-cell>
   <nut-calendar
@@ -501,8 +517,7 @@ export default {
     :default-value="date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :start-date="`2019-10-11`"
-    :end-date="`2022-11-11`"
+    :first-day-of-week="2"
   >
   </nut-calendar>
 </template>
@@ -513,7 +528,6 @@ export default {
     const state = reactive({
       isVisible: false,
       date: '',
-      dateWeek: ''
     });
     const openSwitch = param => {
       state[`${param}`] = true;
@@ -523,7 +537,6 @@ export default {
     };
     const setChooseValue = param => {
       state.date = param[3];
-      state.dateWeek = param[4];
     };
     return {
       ...toRefs(state),
@@ -548,6 +561,8 @@ export default {
         :default-value="date"
         :is-auto-back-fill="true"
         @choose="setChooseValue"
+        :start-date="`2020-02-01`"
+        :end-date="`2020-12-30`"
     >
     </nut-calendar>
   </div>

src/packages/__VUE/calendar/doc.taro.md

@@ -32,8 +32,8 @@ app.use(Calendar);
     :default-value="date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :start-date="`2019-10-11`"
-    :end-date="`2022-11-11`"
+    :start-date="`2022-01-11`"
+    :end-date="`2022-11-30`"
   >
   </nut-calendar>
 </template>
@@ -295,16 +295,18 @@ export default {
   >
   </nut-cell>
   <nut-calendar
+    ref="calendarRef"
     v-model:visible="isVisible"
     :default-value="date"
     type="range"
-    :start-date="`2021-12-22`"
-    :end-date="`2022-12-31`"
+    :start-date="null"
+    :end-date="null"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
     <template v-slot:btn>
       <div class="wrapper">
+        <div class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></div>
         <div class="d_div"> <span class="d_btn" @click="clickBtn">最近七天</span></div>
         <div class="d_div"> <span class="d_btn" @click="clickBtn1">当月</span></div>
       </div>
@@ -316,13 +318,14 @@ export default {
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { reactive, toRefs, ref } from 'vue';
 export default {
   setup() {
     const state = reactive({
-      date: ['2021-12-23', '2021-12-26'],
+      date: [],
       isVisible: false
     });
+    const calendarRef = ref(null);
     const getNumTwoBit = function(n: number): string {
       n = Number(n);
       return (n > 9 ? '' : '0') + n;
@@ -375,7 +378,7 @@ export default {
     };
     const clickBtn = (param: string) => {
       let date = [date2Str(new Date()), getDay(6)];
-      state.date5 = date;
+      state.date = date;
     };
     const clickBtn1 = (param: string) => {
       let date = new Date();
@@ -384,7 +387,12 @@ export default {
       month = month < 10 ? '0' + month : month + '';
       let yearMonth = `${year}-${month}`;
       let currMonthDays = getMonthDays(year + '', month + '');
-      state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+      state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+    };
+    const goDate = () => {
+      if (calendarRef.value) {
+        calendarRef.value.scrollToDate(date2Str(new Date()));
+      }
     };
     return {
       ...toRefs(state),
@@ -392,7 +400,9 @@ export default {
       openSwitch,
       closeSwitch,
       clickBtn,
-      clickBtn1
+      clickBtn1,
+      calendarRef,
+      goDate
     };
   }
 }
@@ -491,9 +501,8 @@ export default {
   <nut-cell
     :showIcon="true"
     title="自定义周起始日"
-    :desc="date ? `${date} ${dateWeek}` : '请选择'"
+    :desc="date ? `${date}` : '请选择'"
     @click="openSwitch('isVisible')"
-    :first-day-of-week="2"
   >
   </nut-cell>
   <nut-calendar
@@ -501,8 +510,7 @@ export default {
     :default-value="date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :start-date="`2019-10-11`"
-    :end-date="`2022-11-11`"
+    :first-day-of-week="2"
   >
   </nut-calendar>
 </template>
@@ -513,7 +521,6 @@ export default {
     const state = reactive({
       isVisible: false,
       date: '',
-      dateWeek: ''
     });
     const openSwitch = param => {
       state[`${param}`] = true;
@@ -523,7 +530,6 @@ export default {
     };
     const setChooseValue = param => {
       state.date = param[3];
-      state.dateWeek = param[4];
     };
     return {
       ...toRefs(state),
@@ -548,6 +554,8 @@ export default {
         :default-value="date"
         :is-auto-back-fill="true"
         @choose="setChooseValue"
+        :start-date="`2020-02-01`"
+        :end-date="`2020-12-30`"
     >
     </nut-calendar>
   </div>
@@ -557,7 +565,7 @@ import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
-      date: '2022-07-08'
+      date: '2020-07-08'
     });
     const setChooseValue = param => {
       state.date = param[3];

src/sites/mobile-taro/vue/src/dentry/pages/calendar/index.vue

@@ -86,8 +86,8 @@
       <nut-cell
         :show-icon="true"
         title="选择日期范围"
-        @click="openSwitch('isVisible4')"
         :desc="date4 ? `${date4[0]}至${date4[1]}` : '请选择'"
+        @click="openSwitch('isVisible4')"
       >
       </nut-cell>
       <nut-calendar
@@ -116,8 +116,8 @@
         v-model:visible="isVisible5"
         :default-value="date5"
         type="range"
-        :start-date="`2021-12-22`"
-        :end-date="`2022-12-31`"
+        :start-date="null"
+        :end-date="null"
         @close="closeSwitch('isVisible5')"
         @choose="setChooseValue5"
       >
@@ -162,9 +162,34 @@
         </template>
       </nut-calendar>
     </div>
+    <h2>自定义周起始日</h2>
+    <div>
+      <nut-cell
+        :showIcon="true"
+        title="自定义周起始日"
+        :desc="date8 ? `${date8}` : '请选择'"
+        @click="openSwitch('isVisible')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible"
+        :default-value="date8"
+        @close="closeSwitch('isVisible8')"
+        @choose="setChooseValue8"
+        :first-day-of-week="2"
+      >
+      </nut-calendar>
+    </div>
     <h2>平铺展示</h2>
     <div class="test-calendar-wrapper">
-      <nut-calendar :poppable="false" :default-value="date2" :is-auto-back-fill="true" @choose="setChooseValue2">
+      <nut-calendar
+        :poppable="false"
+        :default-value="date2"
+        :is-auto-back-fill="true"
+        @choose="setChooseValue2"
+        :start-date="`2020-02-01`"
+        :end-date="`2020-12-30`"
+      >
       </nut-calendar>
     </div>
   </div>
@@ -186,6 +211,8 @@ interface TestCalendarState {
   isVisible4: boolean;
   isVisible5: boolean;
   isVisible6: boolean;
+  isVisible7: boolean;
+  isVisible8: boolean;
   date1: string[];
   date2: string;
   date3: string;
@@ -193,6 +220,7 @@ interface TestCalendarState {
   date5: string[];
   date6: string[];
   date7: string[];
+  date8: string;
 }
 export default {
   props: {},
@@ -211,16 +239,18 @@ export default {
       date2: '2020-07-08',
       date3: '',
       date4: ['2022-02-23', '2022-04-26'],
-      date5: ['2021-12-23', '2021-12-26'],
+      date5: [],
       date6: [],
       date7: [],
+      date8: '',
       isVisible1: false,
       isVisible2: false,
       isVisible3: false,
       isVisible4: false,
       isVisible5: false,
       isVisible6: false,
-      isVisible7: false
+      isVisible7: false,
+      isVisible8: false
     });
     const openSwitch = (param: string) => {
       state[`${param}`] = true;
@@ -266,6 +296,9 @@ export default {
       console.log('changevalue 7 ', chooseData, dateArr);
       state.date7 = [...dateArr];
     };
+    const setChooseValue8 = (param: string) => {
+      state.date8 = param[3];
+    };
     const clickBtn = (param: string) => {
       let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
       state.date5 = date;
@@ -281,7 +314,7 @@ export default {
     };
     const goDate = () => {
       if (calendarRef.value) {
-        calendarRef.value.scrollToDate('2022-04-01');
+        calendarRef.value.scrollToDate(Utils.date2Str(new Date()));
       }
     };
     return {
@@ -298,6 +331,7 @@ export default {
       clickBtn,
       clickBtn1,
       setChooseValue7,
+      setChooseValue8,
       goDate,
       calendarRef,
       select,