Merge pull request #3029 from SergioCrisostomo/fix-datepicker-output

Pass correct arguments to `on-change` callback

Merge pull request #3029 from SergioCrisostomo/fix-datepicker-output
Pass correct arguments to `on-change` callback
Aresn · GitHub
2 parents 21135d10 57f0582b
Showing 4 changed files with 94 additions and 5 deletions Show diff stats
src/components/date-picker/picker.vue
src/components/date-picker/util.js
test/unit/specs/date-picker.spec.js
test/unit/util.js
@@ -183,7 +183,9 @@
                     return this.internalValue.slice();
                 } else {
                     const isRange = this.type.includes('range');
-                    const val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
+                    let val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
+
+                    if (this.type.match(/^time/)) val = val.map(this.formatDate);
                     return (isRange || this.multiple) ? val : val[0];
                 }
             },
@@ -293,8 +295,8 @@
                 );
             },
             emitChange () {
-                this.$emit('on-change', this.visualValue, this.publicValue);
                 this.$nextTick(() => {
+                    this.$emit('on-change', this.publicValue);
                     this.dispatch('FormItem', 'on-form-change', this.publicValue);
                 });
             },
@@ -163,6 +163,8 @@ const RANGE_FORMATTER = function(value, format) {
         if (start && end) {
             return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
         }
+    } else if (!Array.isArray(value) && value instanceof Date){
+        return formatDate(value, format);
     }
     return '';
 };
-import { createVue, destroyVM, stringToDate, dateToString, promissedTick } from '../util';
+import { createVue, destroyVM, stringToDate, dateToString, dateToTimeString, promissedTick } from '../util';
  
 describe('DatePicker.vue', () => {
   let vm;
@@ -26,6 +26,79 @@ describe(&#39;DatePicker.vue&#39;, () =&gt; {
     });
   });
  
+  it('should pass correct arguments to on-change event', done => {
+    const now = new Date();
+    const nowDate = dateToString(now);
+    const nowTime = dateToTimeString(now);
+    const nextHour = dateToTimeString(now.getTime() + 36e5);
+    const nextWeek = new Date(now.getTime() + 6048e5);
+
+    let dateValue, dateRangeValue, timeValue, timeRangeValue;
+    vm = createVue({
+      template: `
+        <div>
+          <date-picker type="date" @on-change="onChangeDate"></date-picker>
+          <date-picker type="daterange" @on-change="onChangeDateRange"></date-picker>
+          <time-picker type="time" @on-change="onChangeTime"></time-picker>
+          <time-picker type="timerange" @on-change="onChangeTimeRange"></time-picker>
+        </div>
+      `,
+      methods: {
+        onChangeDate(val) {
+          dateValue = val;
+        },
+        onChangeDateRange(val) {
+          dateRangeValue = val;
+        },
+        onChangeTime(val) {
+          timeValue = val;
+        },
+        onChangeTimeRange(val) {
+          timeRangeValue = val;
+        },
+      }
+    }, true);
+
+    vm.$nextTick(() => {
+      const [datePicker, dateRangePicker, timePicker, timeRangePicker] = vm.$children;
+
+      datePicker.handleInputChange({target: {value: nowDate}});
+      dateRangePicker.handleInputChange({target: {value: [
+          nowDate,
+          dateToString(nextWeek)
+        ].join(' - ')
+      }});
+
+      timePicker.handleInputChange({target: {value: nowTime}});
+      const timeRangeString = [
+          nowTime,
+          nextHour
+      ].join(' - ');
+      timeRangePicker.handleInputChange({target: {
+        value: timeRangeString
+      }});
+
+      vm.$nextTick(() => {
+        // DATE
+        expect(dateValue instanceof Date).to.equal(true);
+        expect(dateToString(dateValue)).to.equal(nowDate);
+        // DATERANGE
+        expect(Array.isArray(dateRangeValue)).to.equal(true);
+        expect(dateToString(dateRangeValue[0])).to.equal(nowDate);
+        expect(dateToString(dateRangeValue[1])).to.equal(dateToString(nextWeek));
+        // TIME
+        expect(typeof timeValue).to.equal('string');
+        expect(timeValue).to.equal(nowTime);
+        // TIMERANGE
+        expect(Array.isArray(timeRangeValue)).to.equal(true);
+        expect(timeRangeValue[0]).to.equal(nowTime);
+        expect(timeRangeValue[1]).to.equal(nextHour);
+
+        done();
+      });
+    });
+  });
+
   it('should create a DatePicker component of type="datetimerange"', done => {
     vm = createVue(`
       <Date-Picker type="datetimerange"></Date-Picker>
@@ -134,7 +207,7 @@ describe(&#39;DatePicker.vue&#39;, () =&gt; {
  
   it('should fire `on-change` when reseting value', done => {
     const now = new Date();
-    const nowDate = [now.getFullYear(), now.getMonth() + 1, now.getDate()].map(nr => (nr > 9 ? nr : '0' + nr)).join('-');
+    const nowDate = dateToString(now);
     let onChangeCalled = false;
     vm = createVue({
       template: '<date-picker :value="date" type="date" @on-change="onChange"></date-picker>',
@@ -14,6 +14,8 @@ const createElm = function() {
   return elm;
 };
  
+const pad = (nr) => nr < 10 ? '0' + nr : nr;
+
 /**
  * 回收 vm
  * @param  {Object} vm
@@ -72,10 +74,20 @@ exports.stringToDate = function(str) {
  * @param {Date}
  */
 exports.dateToString = function(d) {
-  return [d.getFullYear(), d.getMonth() + 1, d.getDate()].map(nr => nr > 9 ? nr : '0' + nr).join('-');
+  return [d.getFullYear(), d.getMonth() + 1, d.getDate()].map(pad).join('-');
 };
  
 /**
+ * Transform Date to HH:MM:SS string
+ * @param {Date}
+ */
+exports.dateToTimeString = function(d){
+  const date = new Date(d);
+  return [date.getHours(), date.getMinutes(), date.getSeconds()].map(pad).join(':');
+
+}
+
+/**
  * 触发一个事件
  * mouseenter, mouseleave, mouseover, keyup, change, click 等
  * @param  {Element} elm