feat(Calendar): add max-range、range-prompt prop (#5583)

src/calendar/README.md

@@ -221,6 +221,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 天` |
 
 ### Data Structure of Day
 

src/calendar/README.zh-CN.md

@@ -221,6 +221,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 天` |
 
 ### Day 数据结构
 

src/calendar/index.js

@@ -7,11 +7,13 @@ import {
   compareDay,
   compareMonth,
   createComponent,
+  calcDateNum,
   ROW_HEIGHT
 } from './utils';
 
 import Popup from '../popup';
 import Button from '../button';
+import Toast from '../toast';
 import Month from './components/Month';
 import Header from './components/Header';
 
@@ -72,6 +74,16 @@ export default createComponent({
     closeOnClickOverlay: {
       type: Boolean,
       default: true
+    },
+    maxRange: {
+      type: Number,
+      default: null
+    },
+    rangePrompt: {
+      type: String,
+      default() {
+        return t('rangePromptText', this.maxRange);
+      }
     }
   },
 
@@ -254,7 +266,11 @@ export default createComponent({
     },
 
     onConfirm() {
-      this.$emit('confirm', this.currentDate);
+      if (this.maxRange && calcDateNum(this.currentDate) > this.maxRange) {
+        Toast(this.rangePrompt);
+      } else {
+        this.$emit('confirm', this.currentDate);
+      }
     },
 
     genMonth(date, index) {

src/calendar/test/utils.spec.js

@@ -1,4 +1,4 @@
-import { compareDay, compareMonth, getNextDay } from '../utils';
+import { compareDay, compareMonth, getNextDay, calcDateNum } from '../utils';
 
 const date1 = new Date(2010, 0, 1);
 const date2 = new Date(2010, 0, 2);
@@ -24,3 +24,8 @@ test('getNextDay', () => {
   expect(getNextDay(date1).getDate()).toEqual(2);
   expect(getNextDay(date2).getDate()).toEqual(3);
 });
+
+test('calcDateNum', () => {
+  expect(calcDateNum([date1, date2])).toEqual(2);
+  expect(calcDateNum([date1, date3])).toEqual(32);
+});

src/calendar/utils.ts

@@ -42,3 +42,9 @@ export function getNextDay(date: Date) {
 
   return date;
 }
+
+export function calcDateNum(date: [Date, Date]) {
+  const day1 = date[0].getTime();
+  const day2 = date[1].getTime();
+  return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
+}