feat(calendar): add min-range prop support in multiple mode (#5230)

Co-authored-by: liuhaihonggia <liuhaihong@youzan.com>

packages/calendar/README.md

@@ -308,6 +308,14 @@ Page({
 | show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` |
 | allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
 
+### Multiple Props
+
+当 Calendar 的 `type` 为 `multiple` 时，支持以下 props:
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| min-range | 日期最少可选天数 | _number \| string_ | `1` |
+
 ### Day 数据结构
 
 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。

packages/calendar/calendar.wxml

@@ -54,12 +54,12 @@
       type="danger"
       color="{{ color }}"
       custom-class="van-calendar__confirm"
-      disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
+      disabled="{{ computed.getButtonDisabled(type, currentDate, minRange) }}"
       nativeType="text"
       bind:click="onConfirm"
     >
       {{
-        computed.getButtonDisabled(type, currentDate)
+        computed.getButtonDisabled(type, currentDate, minRange)
           ? confirmDisabledText
           : confirmText
       }}

packages/calendar/index.ts

@@ -126,6 +126,10 @@ VantComponent({
       type: null,
       value: null,
     },
+    minRange: {
+      type: Number,
+      value: 1,
+    },
     firstDayOfWeek: {
       type: Number,
       value: 0,

packages/calendar/index.wxs

@@ -15,7 +15,7 @@ function getMonths(minDate, maxDate) {
   return months;
 }
 
-function getButtonDisabled(type, currentDate) {
+function getButtonDisabled(type, currentDate, minRange) {
   if (currentDate == null) {
     return true;
   }
@@ -25,7 +25,7 @@ function getButtonDisabled(type, currentDate) {
   }
 
   if (type === 'multiple') {
-    return !currentDate.length;
+    return currentDate.length < minRange;
   }
 
   return !currentDate;