docs(Calendar): add max-range demo

src/calendar/README.md

@@ -184,6 +184,18 @@ Use `position` to custom popup position，can be set to `top`、`left`、`right`
 />
 ```
 
+### Max Range
+
+When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days
+
+```html
+<van-calendar
+  type="range"
+  :max-range="3"
+  :style="{ height: '500px' }"
+/>
+```
+
 ### Tiled display
 
 Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup
@@ -221,8 +233,8 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` |
 | confirm-text | Confirm button text | *string* | `Confirm` |
 | confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` |
-| max-range | max range of day  | *number* | `null` |
-| range-prompt | err message when the select range over max range | *string* | `选择天数不能超过 xx 天` |
+| max-range`2.4.3` | Number of selectable days | *number* | - |
+| range-prompt`2.4.3` | Error message when exceeded max range | *string* | `Choose no more than xx days` |
 
 ### Data Structure of Day
 

src/calendar/README.zh-CN.md

@@ -184,6 +184,18 @@ export default {
 />
 ```
 
+### 日期区间最大范围
+
+选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案
+
+```html
+<van-calendar
+  type="range"
+  :max-range="3"
+  :style="{ height: '500px' }"
+/>
+```
+
 ### 平铺展示
 
 将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现
@@ -221,8 +233,8 @@ export default {
 | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
 | confirm-text | 确认按钮的文字 | *string* | `确定` |
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` |
-| max-range | 日期区间最大范围天数 | *number* | `null` |
-| range-prompt | 选择超过区间最大范围天数时错误提示 | *string* | `选择天数不能超过 xx 天` |
+| max-range`2.4.3` | 日期区间最多可选天数，默认无限制 | *number* | - |
+| range-prompt`2.4.3` | 选择超过区间范围时的提示文案 | *string* | `选择天数不能超过 xx 天` |
 
 ### Day 数据结构
 

src/calendar/demo/index.vue

@@ -67,6 +67,13 @@
         :value="formatFullDate(date.customPosition)"
         @click="show('single', 'customPosition')"
       />
+
+      <van-cell
+        is-link
+        :title="$t('maxRange')"
+        :value="formatRange(date.maxRange)"
+        @click="show('range', 'maxRange')"
+      />
     </demo-block>
 
     <demo-block :title="$t('tiledDisplay')">
@@ -85,9 +92,10 @@
       :type="type"
       :color="color"
       :round="round"
+      :position="position"
       :min-date="minDate"
       :max-date="maxDate"
-      :position="position"
+      :max-range="maxRange"
       :formatter="formatter"
       :show-confirm="showConfirm"
       :confirm-text="confirmText"
@@ -109,6 +117,7 @@ export default {
       laborDay: '劳动节',
       youthDay: '五四青年节',
       calendar: '日历',
+      maxRange: '日期区间最大范围',
       selectSingle: '选择单个日期',
       selectRange: '选择日期区间',
       quickSelect: '快捷选择',
@@ -129,6 +138,7 @@ export default {
       laborDay: 'Labor day',
       youthDay: 'Youth Day',
       calendar: 'Calendar',
+      maxRange: 'Max Range',
       selectSingle: 'Select Single Date',
       selectRange: 'Select Date Range',
       quickSelect: 'Quick Select',
@@ -147,6 +157,7 @@ export default {
   data() {
     return {
       date: {
+        maxRange: [],
         selectSingle: null,
         selectRange: [],
         quickSelect1: null,
@@ -162,6 +173,7 @@ export default {
       color: undefined,
       minDate: undefined,
       maxDate: undefined,
+      maxRange: undefined,
       position: undefined,
       formatter: undefined,
       showConfirm: false,
@@ -179,6 +191,7 @@ export default {
       this.color = undefined;
       this.minDate = undefined;
       this.maxDate = undefined;
+      this.maxRange = undefined;
       this.position = undefined;
       this.formatter = undefined;
       this.showConfirm = true;
@@ -217,6 +230,9 @@ export default {
           this.round = false;
           this.position = 'right';
           break;
+        case 'maxRange':
+          this.maxRange = 3;
+          break;
       }
     },