diff --git a/src/calendar/README.md b/src/calendar/README.md index 69c0d53e7..409de79b3 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -241,6 +241,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i | show-title `v2.5.5` | Whether to show title | _boolean_ | `true` | | show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` | | show-confirm | Whether to show confirm button | _boolean_ | `true` | +| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` | | confirm-text | Confirm button text | _string_ | `Confirm` | | confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` | | first-day-of-week `v2.9.2` | Set the start day of week | _0-6_ | `0` | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 075b38fa9..56b08b00b 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -243,6 +243,7 @@ export default { | show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` | | show-subtitle `v2.5.5` | 是否展示日历副标题(年月) | _boolean_ | `true` | | show-confirm | 是否展示确认按钮 | _boolean_ | `true` | +| readonly `v2.10.5` | 是否为只读状态,只读状态下不能选择日期 | _boolean_ | `false` | | confirm-text | 确认按钮的文字 | _string_ | `确定` | | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` | | first-day-of-week `v2.9.2` | 设置周起始日 | _0-6_ | `0` | diff --git a/src/calendar/index.js b/src/calendar/index.js index 857f08754..e28d51cd6 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -27,6 +27,7 @@ export default createComponent({ title: String, color: String, value: Boolean, + readonly: Boolean, formatter: Function, confirmText: String, rangePrompt: String, @@ -338,6 +339,10 @@ export default createComponent({ }, select(date, complete) { + if (this.readonly) { + return; + } + const emit = (date) => { this.currentDate = date; this.$emit('select', copyDates(this.currentDate)); diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js index 767609dec..491cc6e57 100644 --- a/src/calendar/test/prop.spec.js +++ b/src/calendar/test/prop.spec.js @@ -213,3 +213,25 @@ test('first day of week', async () => { expect(day.text()).toEqual('1'); expect(day.attributes('style')).toContain(`margin-left: ${(100 * 4) / 7}%`); }); + +test('readonly prop', async () => { + const wrapper = mount(Calendar, { + propsData: { + type: 'multiple', + minDate, + maxDate, + readonly: true, + poppable: false, + }, + }); + + await later(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(13).trigger('click'); + expect(wrapper.emitted('select')).toBeFalsy(); + + wrapper.setProps({ readonly: false }); + days.at(13).trigger('click'); + expect(wrapper.emitted('select')).toBeTruthy(); +});