feat: default-value supports Array for range (#395)

Author: mengxiong10

__test__/calendar-range.test.js

@@ -76,4 +76,17 @@ describe('CalendarRange', () => {
     expect(startPanel.vm.partialUpdate).toBe(false);
     expect(endPanel.vm.partialUpdate).toBe(false);
   });
+
+  it('supports defaultValue is Array', () => {
+    wrapper = mount(CalendarRange, {
+      propsData: {
+        defaultValue: [new Date(2019, 9, 1), new Date(2019, 11, 1)],
+      },
+    });
+    const panels = wrapper.findAll(CalendarPanel);
+    const startPanel = panels.at(0);
+    const endPanel = panels.at(1);
+    expect(startPanel.vm.calendarMonth).toBe(9);
+    expect(endPanel.vm.calendarMonth).toBe(11);
+  });
 });

__test__/datetime-range.test.js

@@ -47,7 +47,7 @@ describe('DatetimeRange', () => {
     wrapper = mount(DatetimeRange, {
       sync: false,
       propsData: {
-        defaultValue: new Date(2019, 9, 1),
+        defaultValue: [new Date(2019, 9, 1), new Date(2019, 9, 1, 12)],
         disabledDate,
         disabledTime,
       },
@@ -59,11 +59,11 @@ describe('DatetimeRange', () => {
     expect(wrapper.emitted().select).toBeUndefined();
     const timeTitle = wrapper.find('.mx-time-header-title');
     expect(timeTitle.text()).toBe('2019-10-02');
-    const defaultValue = new Date(2019, 9, 2, 12);
+    const defaultValue = [new Date(2019, 9, 2, 12), new Date(2019, 9, 2, 12)];
     wrapper.setProps({ defaultValue });
     td.trigger('click');
     td.trigger('click');
     await flushPromises();
-    expect(wrapper.emitted().select[0][0]).toEqual([defaultValue, defaultValue]);
+    expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
   });
 });

__test__/time-range.test.js

@@ -33,4 +33,15 @@ describe('TimeRange', () => {
       new Date(2019, 9, 4, 19, 30, 0),
     ]);
   });
+
+  it('supports defaultValue is Array', () => {
+    wrapper = mount(TimeRange, {
+      propsData: {
+        defaultValue: [new Date(2019, 9, 1, 10), new Date(2019, 11, 1, 12)],
+      },
+    });
+    const actived = wrapper.findAll('.active');
+    expect(actived.at(0).text()).toBe('10');
+    expect(actived.at(3).text()).toBe('12');
+  });
 });

src/calendar/calendar-panel.vue

@@ -128,9 +128,6 @@ export default {
   props: {
     value: {},
     defaultValue: {
-      validator(value) {
-        return !isNaN(new Date(value).getTime());
-      },
       default() {
         const date = new Date();
         date.setHours(0, 0, 0, 0);

src/calendar/calendar-range.js

@@ -27,6 +27,11 @@ export default {
     calendarMaxDiff() {
       return Infinity;
     },
+    defaultValues() {
+      return Array.isArray(this.defaultValue)
+        ? this.defaultValue
+        : [this.defaultValue, this.defaultValue];
+    },
   },
   watch: {
     value: {
@@ -35,7 +40,7 @@ export default {
         this.innerValue = isValidRangeDate(this.value)
           ? this.value
           : [new Date(NaN), new Date(NaN)];
-        this.calendars = this.innerValue.map(v => getValidDate(v, this.defaultValue));
+        this.calendars = this.innerValue.map((v, i) => getValidDate(v, this.defaultValues[i]));
         this.validateCalendars(1);
       },
     },
@@ -108,6 +113,7 @@ export default {
         ...this.$props,
         calendar,
         value: this.innerValue,
+        defaultValue: this.defaultValues[index],
         getClasses: this.getRangeClasses,
         // don't update when range is true
         partialUpdate: false,

src/date-picker.vue

@@ -87,7 +87,7 @@
 
 <script>
 import { parse, format, getWeek } from 'date-format-parse';
-import { isValidDate, isValidRangeDate, getValidDate } from './util/date';
+import { isValidDate, isValidRangeDate } from './util/date';
 import { pick, isObject, mergeDeep } from './util/base';
 import { getLocale, getLocaleFieldValue } from './locale';
 import Popup from './popup';
@@ -306,7 +306,7 @@ export default {
       if (isObject(this.format) && typeof this.format.parse === 'function') {
         return this.format.parse(value, fmt);
       }
-      const backupDate = getValidDate(this.defaultValue);
+      const backupDate = new Date();
       return parse(value, fmt, { locale: this.locale.formatLocale, backupDate });
     },
     formatDate(date, fmt) {

src/datetime/datetime-range.js

@@ -43,15 +43,18 @@ export default {
       if (type === 'date') {
         this.openTimePanel();
       }
+      const defaultValues = Array.isArray(this.defaultValue)
+        ? this.defaultValue
+        : [this.defaultValue, this.defaultValue];
       let datetimes = dates.map((date, i) => {
-        const time = isValidRangeDate(this.value) ? this.value[i] : this.defaultValue;
+        const time = isValidRangeDate(this.value) ? this.value[i] : defaultValues[i];
         return assignTime(date, time);
       });
       if (datetimes[1].getTime() < datetimes[0].getTime()) {
         datetimes = [datetimes[0], datetimes[0]];
       }
       if (datetimes.some(this.disabledTime)) {
-        datetimes = dates.map(date => assignTime(date, this.defaultValue));
+        datetimes = dates.map((date, i) => assignTime(date, defaultValues[i]));
         if (datetimes.some(this.disabledTime)) {
           this.currentValue = datetimes;
           return;

src/time/time-panel.vue

@@ -53,9 +53,6 @@ export default {
   props: {
     value: {},
     defaultValue: {
-      validator(value) {
-        return !isNaN(new Date(value).getTime());
-      },
       default() {
         const date = new Date();
         date.setHours(0, 0, 0, 0);

src/time/time-range.js

@@ -56,13 +56,17 @@ export default {
     },
   },
   render() {
+    const defaultValues = Array.isArray(this.defaultValue)
+      ? this.defaultValue
+      : [this.defaultValue, this.defaultValue];
     return (
       <div class="mx-range-wrapper">
         <TimePanel
           {...{
             props: {
               ...this.$props,
               value: this.startValue,
+              defaultValue: defaultValues[0],
               disabledTime: this.disabledStartTime,
             },
             on: {
@@ -76,6 +80,7 @@ export default {
             props: {
               ...this.$props,
               value: this.endValue,
+              defaultValue: defaultValues[1],
               disabledTime: this.disabledEndTime,
             },
             on: {