feat(calendar): 增加自定义禁用函数disabled-date(#2502) (#2614)

jd-opensource · Nov 7, 2023 · 6b585d2 · 6b585d2
1 parent b14edf1
commit 6b585d2
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 111 deletions.
diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
@@ -82,6 +82,26 @@
       >
       </nut-calendar>
     </div>
+    <div>
+      <nut-cell
+        :show-icon="true"
+        title="自定义禁用日期"
+        :desc="date ? `${date}` : '请选择'"
+        @click="openSwitch('isVisible')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible"
+        :default-value="date"
+        @close="closeSwitch('isVisible')"
+        @choose="setChooseValue"
+        :start-date="`2022-01-01`"
+        :end-date="`2022-11-30`"
+        :disabled-date="disabledDate"
+      >
+      </nut-calendar>
+    </div>
+
     <h2>快捷选择</h2>
     <div>
       <nut-cell
@@ -216,6 +236,7 @@ import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import Utils from '@/packages/utils/date';
+import { toRefs } from 'vue';
 const env = Taro.getEnv();
 
 const calendarRef = ref<any>(null);
@@ -242,6 +263,7 @@ const state = reactive({
   isVisible8: false,
   isVisible9: false
 });
+const { isVisible, date } = toRefs(state);
 const openSwitch = (param: string) => {
   state[`${param}`] = true;
 };
@@ -313,6 +335,18 @@ const goDate = () => {
     calendarRef.value.scrollToDate(Utils.date2Str(date1));
   }
 };
+const disabledDate = (date) => {
+  const disabledDate = {
+    '2022-01-05': true,
+    '2022-01-06': true,
+    '2022-01-10': true,
+    '2022-01-11': true,
+    '2022-01-12': true,
+    '2022-01-13': true,
+    '2022-01-14': true
+  };
+  return disabledDate[date];
+};
 </script>
 
 <style lang="scss">
@@ -321,19 +355,23 @@ const goDate = () => {
     flex: initial;
   }
 }
+
 .test-calendar-wrapper {
   display: flex;
   width: 100%;
   height: 560px;
   overflow: hidden;
 }
+
 .wrapper {
   display: flex;
   padding: 0 40px;
   justify-content: center;
 }
+
 .d_div {
   margin: 0px 5px;
+
   .d_btn {
     background: #fa3f19;
     color: #fff;
@@ -344,6 +382,7 @@ const goDate = () => {
     height: 16px;
   }
 }
+
 .info {
   font-size: 12px;
   line-height: 14px;

diff --git a/src/packages/__VUE/avatarcropper/doc.en-US.md b/src/packages/__VUE/avatarcropper/doc.en-US.md
@@ -89,34 +89,34 @@ const cutImage = (url) => {
 
 ### AvatarCropper Props
 
-| Attribute        | Description                                                                         | Type   | Default |
-| ---------------- | ----------------------------------------------------------------------------------- | ------ | ------- |
-| max-zoom         | Maximum zoom                                                                        | number | 3       |
-| space            | The gap reserved on both sides of the clipping area                                 | number | 20      |
-| toolbar-position | Location of the toolbar in the clipping area. The optional value is：`top` `bottom` | string | bottom  |
-| edit-text        | The text content in the middle                                                      | string | 编辑    |
-| cancel-text      | Cancel button text                                                                  | string | 取消    |
-| cancel-confirm   | Confirm button text                                                                 | string | 确认    |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| max-zoom | Maximum zoom | number | 3 |
+| space | The gap reserved on both sides of the clipping area | number | 20 |
+| toolbar-position | Location of the toolbar in the clipping area. The optional value is：`top` `bottom` | string | bottom |
+| edit-text | The text content in the middle | string | 编辑 |
+| cancel-text | Cancel button text | string | 取消 |
+| cancel-confirm | Confirm button text | string | 确认 |
 
 ### AvatarCropper Slots
 
-| Name    | Description                                                                                                                                  |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| default | The default slot for placing elements such as images, ICONS, and text                                                                        |
+| Name | Description |
+| --- | --- |
+| default | The default slot for placing elements such as images, ICONS, and text |
 | toolbar | After selecting the file, crop the bottom element of the pop-up window can be customized, and invoke the method of the component through ref |
 
 ### AvatarCropper Events
 
-| Name    | Description                             | Callback Arguments     |
-| ------- | --------------------------------------- | ---------------------- |
+| Name | Description | Callback Arguments |
+| --- | --- | --- |
 | confirm | Click Confirm to trigger after cropping | url:The trimmed base64 |
-| cancel  | Click cancel trigger                    | -                      |
+| cancel | Click cancel trigger | - |
 
 ### AvatarCropper Ref
 
-| Event   | Explain            |
-| ------- | ------------------ |
-| cancel  | uncrop             |
-| reset   | Reset to 0 degrees |
-| rotate  | Rotate 90 degrees  |
-| confirm | Definite cut       |
+| Event | Explain |
+| --- | --- |
+| cancel | uncrop |
+| reset | Reset to 0 degrees |
+| rotate | Rotate 90 degrees |
+| confirm | Definite cut |
diff --git a/src/packages/__VUE/avatarcropper/doc.md b/src/packages/__VUE/avatarcropper/doc.md
@@ -89,34 +89,34 @@ const cutImage = (url) => {
 
 ### AvatarCropper Props
 
-| 参数             | 说明                                        | 类型   | 默认值 |
-| ---------------- | ------------------------------------------- | ------ | ------ |
-| max-zoom         | 最大缩放倍数                                | number | 3      |
-| space            | 裁剪区域两边预留的间隙                      | number | 10     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| max-zoom | 最大缩放倍数 | number | 3 |
+| space | 裁剪区域两边预留的间隙 | number | 10 |
 | toolbar-position | 裁剪区域工具栏位置,可选值为：`top` `bottom` | string | bottom |
-| edit-text        | 中间的文字内容                              | string | 编辑   |
-| cancel-text      | 取消按钮的文字                              | string | 取消   |
-| cancel-confirm   | 确认按钮的文字                              | string | 确认   |
+| edit-text | 中间的文字内容 | string | 编辑 |
+| cancel-text | 取消按钮的文字 | string | 取消 |
+| cancel-confirm | 确认按钮的文字 | string | 确认 |
 
 ### AvatarCropper Slots
 
-| 名称    | 描述                                                        |
-| ------- | ----------------------------------------------------------- |
-| default | 默认插槽，可放置图片、图标、文本等元素                      |
+| 名称 | 描述 |
+| --- | --- |
+| default | 默认插槽，可放置图片、图标、文本等元素 |
 | toolbar | 选择文件后裁剪弹窗底部元素可以自定义，通过ref调用组件的方法 |
 
 ### AvatarCropper Events
 
-| 名称    | 描述               | 回调参数           |
-| ------- | ------------------ | ------------------ |
+| 名称 | 描述 | 回调参数 |
+| --- | --- | --- |
 | confirm | 裁剪后点击确认触发 | url:裁剪后的base64 |
-| cancel  | 点击取消触发       | -                  |
+| cancel | 点击取消触发 | - |
 
 ### AvatarCropper Ref
 
-| 事件名  | 说明      |
-| ------- | --------- |
-| cancel  | 取消裁剪  |
-| reset   | 重置为0度 |
-| rotate  | 旋转90度  |
-| confirm | 确定裁剪  |
+| 事件名 | 说明 |
+| --- | --- |
+| cancel | 取消裁剪 |
+| reset | 重置为0度 |
+| rotate | 旋转90度 |
+| confirm | 确定裁剪 |
diff --git a/src/packages/__VUE/avatarcropper/doc.taro.md b/src/packages/__VUE/avatarcropper/doc.taro.md
@@ -89,36 +89,36 @@ const cutImage = (url) => {
 
 ### AvatarCropper Props
 
-| 参数             | 说明                                               | 类型   | 默认值                     |
-| ---------------- | -------------------------------------------------- | ------ | -------------------------- |
-| max-zoom         | 最大缩放倍数                                       | number | 3                          |
-| space            | 裁剪区域两边预留的间隙                             | number | 10                         |
-| toolbar-position | 裁剪区域工具栏位置,可选值为：`top` `bottom`        | string | bottom                     |
-| edit-text        | 中间的文字内容                                     | string | 编辑                       |
-| cancel-text      | 取消按钮的文字                                     | string | 取消                       |
-| cancel-confirm   | 确认按钮的文字                                     | string | 确认                       |
-| size-type        | 所选的图片的尺寸： 可选值：`original` `compressed` | Array  | ['original', 'compressed'] |
-| source-type      | 选择图片的来源： 可选值：`album` `camera`          | Array  | ['album', 'camera']        |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| max-zoom | 最大缩放倍数 | number | 3 |
+| space | 裁剪区域两边预留的间隙 | number | 10 |
+| toolbar-position | 裁剪区域工具栏位置,可选值为：`top` `bottom` | string | bottom |
+| edit-text | 中间的文字内容 | string | 编辑 |
+| cancel-text | 取消按钮的文字 | string | 取消 |
+| cancel-confirm | 确认按钮的文字 | string | 确认 |
+| size-type | 所选的图片的尺寸： 可选值：`original` `compressed` | Array | ['original', 'compressed'] |
+| source-type | 选择图片的来源： 可选值：`album` `camera` | Array | ['album', 'camera'] |
 
 ### AvatarCropper Slots
 
-| 名称    | 描述                                                        |
-| ------- | ----------------------------------------------------------- |
-| default | 默认插槽，可放置图片、图标、文本等元素                      |
+| 名称 | 描述 |
+| --- | --- |
+| default | 默认插槽，可放置图片、图标、文本等元素 |
 | toolbar | 选择文件后裁剪弹窗底部元素可以自定义，通过ref调用组件的方法 |
 
 ### AvatarCropper Events
 
-| 名称    | 描述               | 回调参数           |
-| ------- | ------------------ | ------------------ |
+| 名称 | 描述 | 回调参数 |
+| --- | --- | --- |
 | confirm | 裁剪后点击确认触发 | url:裁剪后的base64 |
-| cancel  | 点击取消触发       | -                  |
+| cancel | 点击取消触发 | - |
 
 ### AvatarCropper Ref
 
-| 事件名  | 说明      |
-| ------- | --------- |
-| cancel  | 取消裁剪  |
-| reset   | 重置为0度 |
-| rotate  | 旋转90度  |
-| confirm | 确定裁剪  |
+| 事件名 | 说明 |
+| --- | --- |
+| cancel | 取消裁剪 |
+| reset | 重置为0度 |
+| rotate | 旋转90度 |
+| confirm | 确定裁剪 |
diff --git a/src/packages/__VUE/calendar/__tests__/calendar.spec.ts b/src/packages/__VUE/calendar/__tests__/calendar.spec.ts
@@ -127,3 +127,27 @@ test('choose event when click item', async () => {
   const arr2: any = wrapper.emitted<[Date]>('choose')![0][0];
   expect(arr2[3]).toEqual('2022-02-14');
 });
+test('Customize the disable date', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      startDate: '2022-01-01',
+      endDate: '2022-12-31',
+      disabledDate: (date: string) => {
+        const disabledDate: { [key: string]: boolean } = {
+          '2022-01-05': true,
+          '2022-01-06': true,
+          '2022-01-10': true,
+          '2022-01-11': true,
+          '2022-01-12': true,
+          '2022-01-13': true,
+          '2022-01-14': true
+        };
+        return disabledDate[date];
+      }
+    }
+  });
+  await nextTick();
+  expect(wrapper.findAll('.nut-calendar__day--disabled').length).toBeGreaterThanOrEqual(7);
+});
diff --git a/src/packages/__VUE/calendar/demo.vue b/src/packages/__VUE/calendar/demo.vue
@@ -87,6 +87,25 @@
       >
       </nut-calendar>
     </div>
+    <div>
+      <nut-cell
+        :show-icon="true"
+        :title="translate('disabledDate')"
+        :desc="date ? `${date}` : translate('please')"
+        @click="openSwitch('isVisible')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible"
+        :default-value="date"
+        :start-date="`2022-01-01`"
+        :end-date="`2022-11-30`"
+        :disabled-date="disabledDate"
+        @close="closeSwitch('isVisible')"
+        @choose="setChooseValue"
+      >
+      </nut-calendar>
+    </div>
     <h2>{{ translate('title1') }}</h2>
     <div>
       <nut-cell
@@ -264,7 +283,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Utils from '@/packages/utils/date';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -285,6 +304,7 @@ const initTranslate = () =>
       range: '选择日期区间',
       multiple: '选择多个日期',
       week: '选择周',
+      disabledDate: '自定义禁用日期',
 
       conjunction: '至',
       custom_btn: '自定义按钮',
@@ -358,6 +378,7 @@ const state = reactive({
   isVisible10: false,
   disabled10: false
 });
+const { isVisible, date } = toRefs(state);
 const openSwitch = (param: string) => {
   (state as any)[`${param}`] = true;
 };
@@ -441,6 +462,20 @@ const clickBtn10 = (dateInfo: any) => {
   state.date10 = dateInfo.date[3];
   state.isVisible10 = false;
 };
+const disabledDate = (date: string) => {
+  const disabledDate: {
+    [key: string]: boolean | undefined;
+  } = {
+    '2022-01-05': true,
+    '2022-01-06': true,
+    '2022-01-10': true,
+    '2022-01-11': true,
+    '2022-01-12': true,
+    '2022-01-13': true,
+    '2022-01-14': true
+  };
+  return disabledDate[date];
+};
 </script>
 
 <style lang="scss" scoped>