fix: defaultValue should be used in datetime mode (#384)

When switching date causes time is disabled, the time of `defaultValue` should be used by default.

Author: mengxiong10

__test__/datetime-panel.test.js

@@ -30,7 +30,7 @@ describe('DatetimePanel', () => {
     const disabledTime = date => date < new Date(2019, 9, 2, 12);
     wrapper = mount(DatetimePanel, {
       propsData: {
-        defaultValue: new Date(2019, 9, 1),
+        defaultValue: new Date(2019, 9, 2, 10),
         disabledDate,
         disabledTime,
       },
@@ -40,5 +40,10 @@ describe('DatetimePanel', () => {
     expect(wrapper.emitted().select).toBeUndefined();
     const timeTitle = wrapper.find('.mx-time-header-title');
     expect(timeTitle.text()).toBe('2019-10-02');
+    // set the defaultValue is not disabled
+    const defaultValue = new Date(2019, 9, 2, 12);
+    wrapper.setProps({ defaultValue });
+    td.trigger('click');
+    expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
   });
 });

__test__/datetime-range.test.js

@@ -59,5 +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);
+    wrapper.setProps({ defaultValue });
+    td.trigger('click');
+    td.trigger('click');
+    await flushPromises();
+    expect(wrapper.emitted().select[0][0]).toEqual([defaultValue, defaultValue]);
   });
 });

package.json

@@ -17,13 +17,13 @@
     "build:index": "cross-env NODE_ENV=production rollup -c",
     "build:locale": "cross-env NODE_ENV=production rollup -c rollup.locale.config.js",
     "build:css": "sass --style=compressed --no-source-map src/style/index.scss index.css && postcss index.css --use autoprefixer -o index.css --no-map && cp -R src/style scss",
-    "build": "npm run lint && npm run test && npm run clean && npm run build:index && npm run build:css && npm run build:locale",
+    "build": "npm run test && npm run clean && npm run build:index && npm run build:css && npm run build:locale",
     "clean": "rimraf scss locale index.*",
     "lint": "eslint src/**/*.{js,vue}",
     "deploy:build": "cross-env NODE_ENV=production parcel build ./example/index.html --public-url ./ --out-dir _site --no-source-maps --no-minify",
     "deploy": "bash build/gh-pages-deploy.sh",
     "format": "prettier --write src/**/*",
-    "test": "jest",
+    "test": "npm run lint && jest",
     "cov": "jest --coverage --coverageReporters=text-lcov | coveralls",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "release": "bash build/git.sh && bash build/release.sh"

src/calendar/calendar-panel.vue

@@ -118,7 +118,9 @@ export default {
   props: {
     value: {},
     defaultValue: {
-      type: [Date, Number],
+      validator(value) {
+        return !isNaN(new Date(value).getTime());
+      },
       default() {
         const date = new Date();
         date.setHours(0, 0, 0, 0);

src/datetime/datetime-panel.js

@@ -1,6 +1,6 @@
 import CalendarPanel from '../calendar/calendar-panel';
 import TimePanel from '../time/time-panel.vue';
-import { isValidDate } from '../util/date';
+import { assignTime, getValidDate } from '../util/date';
 import { pick } from '../util/base';
 
 export default {
@@ -43,14 +43,17 @@ export default {
       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());
+      let datetime = assignTime(date, getValidDate(this.value, this.defaultValue));
       if (this.disabledTime(new Date(datetime))) {
-        this.currentValue = date;
-      } else {
-        this.emitDate(datetime, type);
+        // set the time of defalutValue;
+        datetime = assignTime(date, this.defaultValue);
+        if (this.disabledTime(new Date(datetime))) {
+          // if disabled don't emit date
+          this.currentValue = datetime;
+          return;
+        }
       }
+      this.emitDate(datetime, type);
     },
   },
   render() {

src/datetime/datetime-range.js

@@ -1,7 +1,7 @@
 import CalendarRange from '../calendar/calendar-range';
 import TimeRange from '../time/time-range';
 import { pick } from '../util/base';
-import { isValidRangeDate } from '../util/date';
+import { isValidRangeDate, assignTime } from '../util/date';
 
 export default {
   name: 'DatetimeRange',
@@ -43,20 +43,21 @@ export default {
       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;
+      let datetimes = dates.map((date, i) => {
+        const time = isValidRangeDate(this.value) ? this.value[i] : this.defaultValue;
+        return assignTime(date, time);
       });
       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);
+        datetimes = dates.map(date => assignTime(date, this.defaultValue));
+        if (datetimes.some(this.disabledTime)) {
+          this.currentValue = datetimes;
+          return;
+        }
       }
+      this.emitDate(datetimes, type);
     },
   },
   render() {

src/time/time-panel.vue

@@ -45,7 +45,9 @@ export default {
   props: {
     value: {},
     defaultValue: {
-      type: [Date, Number],
+      validator(value) {
+        return !isNaN(new Date(value).getTime());
+      },
       default() {
         const date = new Date();
         date.setHours(0, 0, 0, 0);
@@ -134,7 +136,7 @@ export default {
   },
   methods: {
     isDisabled(date) {
-      return this.disabledTime(new Date(date), this.innerValue);
+      return this.disabledTime(new Date(date));
     },
     handleSelect(value, type) {
       const date = new Date(value);

src/time/time-range.js

@@ -49,13 +49,10 @@ export default {
       this.emitChange(type, 1);
     },
     disabledStartTime(date) {
-      return this.disabledTime(date, [this.startValue, this.endValue], 0);
+      return this.disabledTime(date, 0);
     },
     disabledEndTime(date) {
-      return (
-        date.getTime() < this.startValue.getTime() ||
-        this.disabledTime(date, [this.startValue, this.endValue], 1)
-      );
+      return date.getTime() < this.startValue.getTime() || this.disabledTime(date, 1);
     },
   },
   render() {

src/util/date.js

@@ -19,3 +19,10 @@ export function getValidDate(value, ...backup) {
   const date = new Date(value);
   return isValidDate(date) ? date : getValidDate(...backup);
 }
+
+export function assignTime(target, source) {
+  const date = new Date(target);
+  const time = new Date(source);
+  date.setHours(time.getHours(), time.getMinutes(), time.getSeconds());
+  return date;
+}