From 3cda85e122c5cc9e37ca0ad391dd225d615e1091 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 3 May 2020 09:11:14 +0800
Subject: [PATCH] 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         | 11 ++++++++++-
 src/calendar/README.zh-CN.md   | 11 ++++++++++-
 src/calendar/index.js          |  2 ++
 src/calendar/test/prop.spec.js | 25 +++++++++++++++++++++++--
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/calendar/README.md b/src/calendar/README.md
index 0716e1447..aa89a3218 100644
--- a/src/calendar/README.md
+++ b/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 |
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index f45312944..7d3d4086b 100644
--- a/src/calendar/README.zh-CN.md
+++ b/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 对象的内容
diff --git a/src/calendar/index.js b/src/calendar/index.js
index 2d1eb5b17..2000a2910 100644
--- a/src/calendar/index.js
+++ b/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]);
         }
diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js
index 83d29b374..239ef45b8 100644
--- a/src/calendar/test/prop.spec.js
+++ b/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: {