feat(Calendar): support max-range when type is multiple (#6202)

* feat(Calendar): support max-range when type is multiple

* docs: fix version tag

src/calendar/README.md

@@ -255,10 +255,19 @@ Following props are supported when the type is range
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| max-range `v2.4.3` | Number of selectable days | _number \| string_ | - |
+| max-range `v2.4.3` | Number of selectable days | _number \| string_ | Unlimitied |
 | range-prompt `v2.4.3` | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
 | allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | _boolean_ | `fasle` |
 
+### Multiple Props
+
+Following props are supported when the type is multiple
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| max-range `v2.7.2` | Max count of selectable days | _number \| string_ | Unlimitied |
+| range-prompt `v2.4.3` | Error message when exceeded max count | _string_ | `Choose no more than xx days` |
+
 ### Data Structure of Day
 
 | Key | Description | Type |

src/calendar/README.zh-CN.md

@@ -257,10 +257,19 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
+| max-range `v2.4.3` | 日期区间最多可选天数 | _number \| string_ | 无限制 |
 | range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
 | allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` |
 
+### Multiple Props
+
+当 Canlendar 的 `type` 为 `multiple` 时，支持以下 props:
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| max-range `v2.7.2` | 日期最多可选天数 | _number \| string_ | 无限制 |
+| range-prompt `v2.4.3` | 选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
+
 ### Day 数据结构
 
 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容

src/calendar/index.js

@@ -293,6 +293,8 @@ export default createComponent({
         if (selected) {
           const [unselectedDate] = currentDate.splice(selectedIndex, 1);
           this.$emit('unselect', copyDate(unselectedDate));
+        } else if (this.maxRange && currentDate.length >= this.maxRange) {
+          Toast(this.rangePrompt || t('rangePrompt', this.maxRange));
         } else {
           this.select([...currentDate, date]);
         }

src/calendar/test/prop.spec.js

@@ -2,7 +2,7 @@ import Calendar from '..';
 import { mount, later } from '../../../test';
 import { minDate, maxDate, formatRange, formatDate } from './utils';
 
-test('max-range prop when showConfirm is false', async () => {
+test('max-range prop when type is range and showConfirm is false', async () => {
   const wrapper = mount(Calendar, {
     propsData: {
       type: 'range',
@@ -27,7 +27,7 @@ test('max-range prop when showConfirm is false', async () => {
   expect(wrapper.emitted('confirm')).toBeFalsy();
 });
 
-test('max-range prop when showConfirm is true', async () => {
+test('max-range prop when type is range and showConfirm is true', async () => {
   const wrapper = mount(Calendar, {
     propsData: {
       type: 'range',
@@ -51,6 +51,27 @@ test('max-range prop when showConfirm is true', async () => {
   expect(wrapper.emitted('confirm')).toBeFalsy();
 });
 
+test('max-range prop when type is multiple', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      type: 'multiple',
+      minDate,
+      maxDate,
+      maxRange: 2,
+      poppable: false,
+      showConfirm: false,
+    },
+  });
+
+  await later();
+
+  const days = wrapper.findAll('.van-calendar__day');
+  days.at(13).trigger('click');
+  days.at(14).trigger('click');
+
+  expect(wrapper.emitted('select').length).toEqual(1);
+});
+
 test('show-title prop', () => {
   const wrapper = mount(Calendar, {
     propsData: {