fix date formatting when strings are supplied to DatePicker

baishancloud · Oct 23, 2017 · 65255c9 · 65255c9
1 parent b92a1b5
commit 65255c9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
@@ -513,7 +513,7 @@
 
                     if (val && type === 'time' && !(val instanceof Date)) {
                         val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                    } else if (val && type === 'timerange' && Array.isArray(val) && val.length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
+                    } else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
                         val = val.join(RANGE_SEPARATOR);
                         val = parser(val, this.format || DEFAULT_FORMATS[type]);
                     } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){

diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM, stringToDate, promissedTick } from '../util';
+import { createVue, destroyVM, stringToDate, dateToString, promissedTick } from '../util';
 
 describe('DatePicker.vue', () => {
   let vm;
@@ -191,6 +191,46 @@ describe('DatePicker.vue', () => {
     });
   });
 
+  it('should convert strings to Date objects', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <date-picker v-model="value1" type="daterange" style="width: 200px"></date-picker>
+          <date-picker v-model="value2" type="daterange" placement="bottom-end" style="width: 200px"></date-picker>
+          <date-picker v-model="value3" type="datetime" placement="bottom-end" style="width: 200px"></date-picker>
+          <date-picker v-model="value4" type="datetimerange" placement="bottom-end" style="width: 200px"></date-picker>
+        </div>
+      `,
+      data() {
+        return {
+          value1: ['2017-10-10', '2017-10-20'],
+          value2: [new Date(), new Date()],
+          value3: '2017-10-10 10:00:00',
+          value4: ['2027-10-10 10:00:00', '2027-10-20 10:00:00']
+        };
+      }
+    });
+
+    vm.$nextTick(() => {
+      const {value1, value2, value3, value4} = vm;
+
+      expect(value1[0] instanceof Date).to.equal(true);
+      expect(value1[1] instanceof Date).to.equal(true);
+      expect(value1.map(dateToString).join('|')).to.equal('2017-10-10|2017-10-20');
+
+      expect(value2[0] instanceof Date).to.equal(true);
+      expect(value2[1] instanceof Date).to.equal(true);
+      expect(value2.map(dateToString).join('|')).to.equal([new Date(), new Date()].map(dateToString).join('|'));
+
+      expect(dateToString(vm.value3)).to.equal('2017-10-10');
+
+      expect(value4[0] instanceof Date).to.equal(true);
+      expect(value4[1] instanceof Date).to.equal(true);
+      expect(value4.map(dateToString).join('|')).to.equal('2027-10-10|2027-10-20');
+      done();
+    });
+  });
+
   it('should render date-picker label correctly in zh-CN', done => {
     vm = createVue(`
       <Date-picker type="date"></Date-picker>

diff --git a/test/unit/util.js b/test/unit/util.js
@@ -67,6 +67,14 @@ exports.stringToDate = function(str) {
   return new Date(...parts);
 };
 
+/**
+ * Transform Date to yyyy-mm-dd string
+ * @param {Date}
+ */
+exports.dateToString = function(d) {
+  return [d.getFullYear(), d.getMonth() + 1, d.getDate()].map(nr => nr > 9 ? nr : '0' + nr).join('-');
+};
+
 /**
  * 触发一个事件
  * mouseenter, mouseleave, mouseover, keyup, change, click 等