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;
+}

src/locale/lang/en-US.ts

@@ -17,7 +17,8 @@ export default {
     start: 'Start',
     title: 'Calendar',
     weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    monthTitle: (year: number, month: number) => `${year}/${month}`
+    monthTitle: (year: number, month: number) => `${year}/${month}`,
+    rangePromptText: (maxRange: Number) => `Choose no more than ${maxRange} days`
   },
   vanContactCard: {
     addText: 'Add contact info'

src/locale/lang/es-ES.ts

@@ -17,7 +17,8 @@ export default {
     start: 'Comienzo',
     title: 'Calendario',
     weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
-    monthTitle: (year: number, month: number) => `${year}/${month}`
+    monthTitle: (year: number, month: number) => `${year}/${month}`,
+    rangePromptText: (maxRange: Number) => `Elija no más de ${maxRange} días`
   },
   vanContactCard: {
     addText: 'Añadir información de contacto'

src/locale/lang/tr-TR.ts

@@ -17,7 +17,8 @@ export default {
     start: 'Başlat',
     title: 'Takvim',
     weekdays: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
-    monthTitle: (year: number, month: number) => `${year}/${month}`
+    monthTitle: (year: number, month: number) => `${year}/${month}`,
+    rangePromptText: (maxRange: Number) => `En fazla ${maxRange} gün seçin`
   },
   vanContactCard: {
     addText: 'Kişi bilgisi ekle'

src/locale/lang/zh-CN.ts

@@ -18,7 +18,8 @@ export default {
     title: '日期选择',
     confirm: '确定',
     weekdays: ['日', '一', '二', '三', '四', '五', '六'],
-    monthTitle: (year: number, month: number) => `${year}年${month}月`
+    monthTitle: (year: number, month: number) => `${year}年${month}月`,
+    rangePromptText: (maxRange: Number) => `选择天数不能超过 ${maxRange} 天`
   },
   vanContactCard: {
     addText: '添加联系人'

src/locale/lang/zh-HK.ts

@@ -18,7 +18,8 @@ export default {
     title: '日期選擇',
     confirm: '確定',
     weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
-    monthTitle: (year: number, month: number) => `${year}年${month}月`
+    monthTitle: (year: number, month: number) => `${year}年${month}月`,
+    rangePromptText: (maxRange: Number) => `選擇天數不能超過 ${maxRange} 天`
   },
   vanContactCard: {
     addText: '添加聯系人'

src/locale/lang/zh-TW.ts

@@ -18,7 +18,8 @@ export default {
     title: '日期選擇',
     confirm: '確定',
     weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
-    monthTitle: (year: number, month: number) => `${year}年${month}月`
+    monthTitle: (year: number, month: number) => `${year}年${month}月`,
+    rangePromptText: (maxRange: Number) => `選擇天數不能超過 ${maxRange} 天`
   },
   vanContactCard: {
     addText: '新增聯絡人'