diff --git a/src/calendar/README.md b/src/calendar/README.md index 419c10f0b..d46785bd7 100644 --- a/src/calendar/README.md +++ b/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 diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 04e6acfd5..ee488b5c1 100644 --- a/src/calendar/README.zh-CN.md +++ b/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 数据结构 diff --git a/src/calendar/index.js b/src/calendar/index.js index efb294581..3082ce04a 100644 --- a/src/calendar/index.js +++ b/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) { diff --git a/src/calendar/test/utils.spec.js b/src/calendar/test/utils.spec.js index c978a5d96..5e42340cd 100644 --- a/src/calendar/test/utils.spec.js +++ b/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); +}); diff --git a/src/calendar/utils.ts b/src/calendar/utils.ts index a71e5f701..4cd606c25 100644 --- a/src/calendar/utils.ts +++ b/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; +} diff --git a/src/locale/lang/en-US.ts b/src/locale/lang/en-US.ts index df72c17cf..5565032d5 100644 --- a/src/locale/lang/en-US.ts +++ b/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' diff --git a/src/locale/lang/es-ES.ts b/src/locale/lang/es-ES.ts index 36c5d8e3d..8fa52d011 100644 --- a/src/locale/lang/es-ES.ts +++ b/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' diff --git a/src/locale/lang/tr-TR.ts b/src/locale/lang/tr-TR.ts index ff847409b..9a8e368a9 100644 --- a/src/locale/lang/tr-TR.ts +++ b/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' diff --git a/src/locale/lang/zh-CN.ts b/src/locale/lang/zh-CN.ts index 2dc75aa53..9a338179c 100644 --- a/src/locale/lang/zh-CN.ts +++ b/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: '添加联系人' diff --git a/src/locale/lang/zh-HK.ts b/src/locale/lang/zh-HK.ts index bbcbec391..28b3f4c8c 100644 --- a/src/locale/lang/zh-HK.ts +++ b/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: '添加聯系人' diff --git a/src/locale/lang/zh-TW.ts b/src/locale/lang/zh-TW.ts index c2d1919cd..f83f8e472 100644 --- a/src/locale/lang/zh-TW.ts +++ b/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: '新增聯絡人'