Merge branch 'dev' into next

src/calendar/README.md

@@ -233,7 +233,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
 | min-date | Min date | _Date_ | Today |
 | max-date | Max date | _Date_ | Six months after the today |
-| default-date | Default selected date | _Date \| Date[]_ | Today |
+| default-date | Default selected date | _Date \| Date[] \| null_ | Today |
 | row-height | Row height | _number \| string_ | `64` |
 | formatter | Day formatter | _(day: Day) => Day_ | - |
 | poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
@@ -242,6 +242,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

@@ -235,7 +235,7 @@ export default {
 | color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
 | min-date | 可选择的最小日期 | _Date_ | 当前日期 |
 | max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
-| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 |
+| default-date | 默认选中的日期，`type` 为 `multiple` 或 `range` 时为数组，传入 `null` 表示默认不选择 | _Date \| Date[] \| null_ | 今天 |
 | row-height | 日期行高 | _number \| string_ | `64` |
 | formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
 | poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
@@ -244,6 +244,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/components/Month.js

@@ -160,6 +160,10 @@ export default createComponent({
         return 'disabled';
       }
 
+      if (currentDate === null) {
+        return;
+      }
+
       if (Array.isArray(currentDate)) {
         if (type === 'multiple') {
           return getMultipleDayType(day);

src/calendar/index.js

@@ -28,6 +28,7 @@ export default createComponent({
     show: Boolean,
     title: String,
     color: String,
+    readonly: Boolean,
     teleport: [String, Object],
     formatter: Function,
     confirmText: String,
@@ -139,12 +140,13 @@ export default createComponent({
     buttonDisabled() {
       const { type, currentDate } = this;
 
-      if (type === 'range') {
-        return !currentDate[0] || !currentDate[1];
-      }
-
-      if (type === 'multiple') {
-        return !currentDate.length;
+      if (currentDate) {
+        if (type === 'range') {
+          return !currentDate[0] || !currentDate[1];
+        }
+        if (type === 'multiple') {
+          return !currentDate.length;
+        }
       }
 
       return !currentDate;
@@ -201,6 +203,11 @@ export default createComponent({
     scrollIntoView() {
       this.$nextTick(() => {
         const { currentDate } = this;
+
+        if (!currentDate) {
+          return;
+        }
+
         const targetDate =
           this.type === 'single' ? currentDate : currentDate[0];
         const displayed = this.show || !this.poppable;
@@ -225,6 +232,10 @@ export default createComponent({
     getInitialDate() {
       const { type, minDate, maxDate, defaultDate } = this;
 
+      if (defaultDate === null) {
+        return defaultDate;
+      }
+
       let defaultVal = new Date();
 
       if (compareDay(defaultVal, minDate) === -1) {
@@ -301,6 +312,11 @@ export default createComponent({
       const { type, currentDate } = this;
 
       if (type === 'range') {
+        if (!currentDate) {
+          this.select([date, null]);
+          return;
+        }
+
         const [startDay, endDay] = currentDate;
 
         if (startDay && !endDay) {
@@ -317,8 +333,12 @@ export default createComponent({
           this.select([date, null]);
         }
       } else if (type === 'multiple') {
-        let selectedIndex;
+        if (!currentDate) {
+          this.select([date]);
+          return;
+        }
 
+        let selectedIndex;
         const selected = this.currentDate.some((dateItem, index) => {
           const equal = compareDay(dateItem, date) === 0;
           if (equal) {
@@ -345,6 +365,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();
+});