diff --git a/src/calendar/README.md b/src/calendar/README.md
index d46785bd7..a2a969266 100644
--- a/src/calendar/README.md
+++ b/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
+
+```
+
### 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
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index ee488b5c1..7baeb9dcc 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -184,6 +184,18 @@ export default {
/>
```
+### 日期区间最大范围
+
+选择日期区间时,可以通过`max-range`属性来指定最多可选天数,选择的范围超过最多可选天数时,会弹出相应的提示文案
+
+```html
+
+```
+
### 平铺展示
将`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 数据结构
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index dc969e9c5..3235d2a28 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -67,6 +67,13 @@
:value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')"
/>
+
+
@@ -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;
}
},