feat: add prop partial-update

Determine whether update date when select year of month.
The default value is false.

src/calendar/calendar-panel.vue

@@ -146,6 +146,11 @@ export default {
       default: 'YYYY-MM-DD',
     },
     calendar: Date,
+    // update date when select year or month
+    partialUpdate: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     const panels = ['date', 'year', 'month'];
@@ -252,6 +257,10 @@ export default {
         const nextCalendar = setYear(this.innerCalendar, year);
         this.updateCalendar(nextCalendar);
         this.handelPanelChange('month');
+        if (this.partialUpdate && this.innerValue[0]) {
+          const date = setYear(this.innerValue[0], year);
+          this.emitDate(date, 'year');
+        }
       }
     },
     handleSelectMonth(month) {
@@ -262,6 +271,10 @@ export default {
         const nextCalendar = setMonth(this.innerCalendar, month);
         this.updateCalendar(nextCalendar);
         this.handelPanelChange('date');
+        if (this.partialUpdate && this.innerValue[0]) {
+          const date = setMonth(setYear(this.innerValue[0], this.calendarYear), month);
+          this.emitDate(date, 'month');
+        }
       }
     },
     handleSelectDate(day) {

src/calendar/calendar-range.js

@@ -3,6 +3,7 @@ import CalendarPanel from './calendar-panel';
 import { getValidDate, isValidDate, isValidRangeDate } from '../util/date';
 
 export default {
+  name: 'CalendarRange',
   components: { CalendarPanel },
   props: {
     ...CalendarPanel.props,
@@ -107,6 +108,8 @@ export default {
         calendar,
         value: this.innerValue,
         getClasses: this.getRangeClasses,
+        // don't update when range is true
+        partialUpdate: false,
       };
       const on = {
         select: this.handleSelect,

src/datetime/datetime-panel.js

@@ -42,16 +42,14 @@ export default {
     handleSelect(date, type) {
       if (type === 'date') {
         this.openTimePanel();
-        const time = isValidDate(this.value) ? this.value : new Date(this.defaultValue);
-        const datetime = new Date(date);
-        datetime.setHours(time.getHours(), time.getMinutes(), time.getSeconds());
-        if (this.disabledTime(new Date(datetime))) {
-          this.currentValue = date;
-        } else {
-          this.emitDate(datetime, type);
-        }
+      }
+      const time = isValidDate(this.value) ? this.value : new Date(this.defaultValue);
+      const datetime = new Date(date);
+      datetime.setHours(time.getHours(), time.getMinutes(), time.getSeconds());
+      if (this.disabledTime(new Date(datetime))) {
+        this.currentValue = date;
       } else {
-        this.emitDate(date, type);
+        this.emitDate(datetime, type);
       }
     },
   },
@@ -59,6 +57,7 @@ export default {
     const calendarProps = {
       props: {
         ...pick(this, Object.keys(CalendarPanel.props)),
+        type: 'date',
         value: this.currentValue,
       },
       on: {
@@ -72,7 +71,7 @@ export default {
         value: this.currentValue,
       },
       on: {
-        select: this.handleSelect,
+        select: this.emitDate,
         'title-click': this.closeTimePanel,
       },
     };

src/datetime/datetime-range.js

@@ -42,22 +42,20 @@ export default {
     handleSelect(dates, type) {
       if (type === 'date') {
         this.openTimePanel();
-        let datetimes = dates.map((v, i) => {
-          const datetime = new Date(v);
-          const time = isValidRangeDate(this.value) ? this.value[i] : new Date(this.defaultValue);
-          datetime.setHours(time.getHours(), time.getMinutes(), time.getSeconds());
-          return datetime;
-        });
-        if (datetimes[1].getTime() < datetimes[0].getTime()) {
-          datetimes = [datetimes[0], datetimes[0]];
-        }
-        if (datetimes.some(this.disabledTime)) {
-          this.currentValue = dates;
-        } else {
-          this.emitDate(datetimes, type);
-        }
+      }
+      let datetimes = dates.map((v, i) => {
+        const datetime = new Date(v);
+        const time = isValidRangeDate(this.value) ? this.value[i] : new Date(this.defaultValue);
+        datetime.setHours(time.getHours(), time.getMinutes(), time.getSeconds());
+        return datetime;
+      });
+      if (datetimes[1].getTime() < datetimes[0].getTime()) {
+        datetimes = [datetimes[0], datetimes[0]];
+      }
+      if (datetimes.some(this.disabledTime)) {
+        this.currentValue = dates;
       } else {
-        this.emitDate(dates, type);
+        this.emitDate(datetimes, type);
       }
     },
   },
@@ -65,6 +63,7 @@ export default {
     const calendarProps = {
       props: {
         ...pick(this, Object.keys(CalendarRange.props)),
+        type: 'date',
         value: this.currentValue,
       },
       on: {
@@ -78,7 +77,7 @@ export default {
         showTimeHeader: true,
       },
       on: {
-        select: this.handleSelect,
+        select: this.emitDate,
         'title-click': this.closeTimePanel,
       },
     };