date-picker: fix value-format change event

packages/date-picker/src/picker.vue

@@ -69,7 +69,7 @@
 <script>
 import Vue from 'vue';
 import Clickoutside from 'element-ui/src/utils/clickoutside';
-import { formatDate, parseDate, isDate, isDateObject, getWeekNumber } from './util';
+import { formatDate, parseDate, isDateObject, getWeekNumber } from './util';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Emitter from 'element-ui/src/mixins/emitter';
 import Focus from 'element-ui/src/mixins/focus';
@@ -453,20 +453,19 @@ export default {
     },
 
     // {parse, formatTo} Value deals maps component value with internal Date
-    // parseValue validates value according to panel, requires picker to be mounted
-    parseValue(value, customFormat) {
-      if (!value || (!Array.isArray(value) || !value.every(val => val))) {
-        return null;
+    parseValue(value) {
+      const isParsed = isDateObject(value) || (Array.isArray(value) && value.every(isDateObject));
+      if (this.valueFormat && !isParsed) {
+        return parseAsFormatAndType(value, this.valueFormat, this.type, this.rangeSeparator) || value;
+      } else {
+        return value;
       }
-      const format = customFormat || this.valueFormat;
-      const parsedValue = parseAsFormatAndType(value, format, this.type, this.rangeSeparator);
-      return this.isValidValue(parsedValue) ? parsedValue : null;
     },
 
-    formatToValue(date, customFormat) {
-      if (this.valueFormat && (isDate(date) || Array.isArray(date))) {
-        const format = customFormat || this.valueFormat;
-        return formatAsFormatAndType(date, format, this.type, this.rangeSeparator);
+    formatToValue(date) {
+      const isFormattable = isDateObject(date) || (Array.isArray(date) && date.every(isDateObject));
+      if (this.valueFormat && isFormattable) {
+        return formatAsFormatAndType(date, this.valueFormat, this.type, this.rangeSeparator);
       } else {
         return date;
       }
@@ -739,12 +738,9 @@ export default {
     },
 
     emitChange(val) {
-      const formatted = this.formatToValue(val);
-      if (!valueEquals(this.valueOnOpen, formatted)) {
-        this.$emit('change', formatted);
-        this.dispatch('ElFormItem', 'el.form.change', formatted);
-        this.valueOnOpen = formatted;
-      }
+      this.$emit('change', val);
+      this.dispatch('ElFormItem', 'el.form.change', val);
+      this.valueOnOpen = val;
     },
 
     emitInput(val) {

test/unit/specs/date-picker.spec.js

@@ -376,7 +376,7 @@ describe('DatePicker', () => {
             ref="compo"
             v-model="value"
             type="date"
-            value-format="dd-MM-yyyy" />`,
+            value-format="dd/MM yyyy" />`,
         data() {
           return {
             value: ''
@@ -395,7 +395,7 @@ describe('DatePicker', () => {
           const yyyy = today.getFullYear();
           const MM = ('0' + (today.getMonth() + 1)).slice(-2);
           const dd = '01';   // first available one should be first day of month
-          const expectValue = `${dd}-${MM}-${yyyy}`;
+          const expectValue = `${dd}/${MM} ${yyyy}`;
           expect(vm.value).to.equal(expectValue);
           expect(spy.calledOnce).to.be.true;
           expect(spy.calledWith(expectValue)).to.be.true;
@@ -443,8 +443,8 @@ describe('DatePicker', () => {
             ref="compo"
             v-model="value"
             type="date"
-            value-format="dd-MM-yyyy"
-            format="yyyy-MM-dd" />`,
+            format="yyyy-MM-dd"
+            value-format="dd/MM yyyy" />`,
         data() {
           return {
             value: ''
@@ -458,7 +458,7 @@ describe('DatePicker', () => {
         triggerEvent(input, 'input');
         keyDown(input, ENTER);
         setTimeout(_ => {
-          expect(vm.value).to.equal('01-10-2000');
+          expect(vm.value).to.equal('01/10 2000');
           done();
         }, DELAY);
       }, DELAY);
@@ -471,7 +471,8 @@ describe('DatePicker', () => {
             ref="compo"
             v-model="value"
             type="daterange"
-            value-format="dd-MM-yyyy" />`,
+            format="yyyy-MM-dd"
+            value-format="dd/MM yyyy" />`,
         data() {
           return {
             value: ''
@@ -490,7 +491,7 @@ describe('DatePicker', () => {
           triggerEvent(inputs[1], 'input');
           keyDown(inputs[0], ENTER);
           setTimeout(_ => {
-            expect(vm.value).to.eql(['01-10-2000', '02-10-2000']);
+            expect(vm.value).to.eql(['01/10 2000', '02/10 2000']);
             done();
           }, DELAY);
         }, DELAY);