feat(Calendar): add show-range-prompt prop (#8739)

* feat(Calendar): add show-range-prompt prop

- show-range-prompt prop
- over-range event

* docs(Calendar): upper case

src/calendar/Calendar.tsx

@@ -104,9 +104,20 @@ export default defineComponent({
       default: 0,
       validator: (val: number) => val >= 0 && val <= 6,
     },
+    showRangePrompt: {
+      type: Boolean,
+      default: true,
+    },
   },
 
-  emits: ['select', 'confirm', 'unselect', 'month-show', 'update:show'],
+  emits: [
+    'select',
+    'confirm',
+    'unselect',
+    'month-show',
+    'update:show',
+    'over-range',
+  ],
 
   setup(props, { emit, slots }) {
     const limitDateRange = (
@@ -308,10 +319,13 @@ export default defineComponent({
     };
 
     const checkRange = (date: [Date, Date]) => {
-      const { maxRange, rangePrompt } = props;
+      const { maxRange, rangePrompt, showRangePrompt } = props;
 
       if (maxRange && calcDateNum(date) > maxRange) {
-        Toast(rangePrompt || t('rangePrompt', maxRange));
+        if (showRangePrompt) {
+          Toast(rangePrompt || t('rangePrompt', maxRange));
+        }
+        emit('over-range');
         return false;
       }
 

src/calendar/README.md

@@ -290,6 +290,7 @@ Following props are supported when the type is range
 | --- | --- | --- | --- |
 | max-range | Number of selectable days | _number \| string_ | Unlimited |
 | range-prompt | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
+| show-range-prompt | Whether prompt error message when exceeded max range | _boolean_ | `true` |
 | allow-same-day | Whether the start and end time of the range is allowed on the same day | _boolean_ | `false` |
 
 ### Calendar Multiple Props
@@ -324,6 +325,7 @@ Following props are supported when the type is multiple
 | closed | Emitted when Popup is closed | - |
 | unselect | Emitted when unselect date when type is multiple | _value: Date_ |
 | month-show | Emitted when a month enters the visible area | _{ date: Date, title: string }_ |
+| over-range | Emitted when exceeded max range | - |
 
 ### Slots
 

src/calendar/README.zh-CN.md

@@ -294,6 +294,7 @@ export default {
 | --- | --- | --- | --- |
 | max-range | 日期区间最多可选天数 | _number \| string_ | 无限制 |
 | range-prompt | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
+| show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` |
 | allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
 
 ### Calendar Multiple Props
@@ -330,6 +331,7 @@ export default {
 | closed | 关闭弹出层且动画结束后触发 | - |
 | unselect | 当日历组件的 `type` 为 `multiple` 时，取消选中日期时触发 | _value: Date_ |
 | month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
+| over-range | 范围选择超过最多可选天数时触发 | - |
 
 ### Slots
 

src/calendar/test/prop.spec.ts

@@ -252,3 +252,50 @@ test('readonly prop', async () => {
   days[13].trigger('click');
   expect(wrapper.emitted('select')).toBeTruthy();
 });
+
+test('should disabled prompt when using show-range-prompt prop', async () => {
+  document.getElementsByTagName('html')[0].innerHTML = '';
+  const wrapper = mount(Calendar, {
+    props: {
+      type: 'range',
+      minDate,
+      maxDate,
+      maxRange: 3,
+      poppable: false,
+      lazyRender: false,
+      showRangePrompt: false,
+    },
+  });
+
+  await later();
+
+  const days = wrapper.findAll('.van-calendar__day');
+  days[12].trigger('click');
+  days[18].trigger('click');
+
+  await later();
+  expect(document.querySelector('.van-toast')).toBeFalsy();
+});
+
+test('should emit over-range when exceeded max range', async () => {
+  const onOverRange = jest.fn();
+  const wrapper = mount(Calendar, {
+    props: {
+      type: 'range',
+      minDate,
+      maxDate,
+      maxRange: 3,
+      onOverRange,
+      poppable: false,
+      lazyRender: false,
+    },
+  });
+
+  await later();
+
+  const days = wrapper.findAll('.van-calendar__day');
+  days[12].trigger('click');
+  days[18].trigger('click');
+
+  expect(onOverRange).toHaveBeenCalledTimes(1);
+});