feat(Calendar): add readonly prop (#7115)

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` |

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` |

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));

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