fix: date-picker input string not correct #2246

Author: tangjinzhou

components/_util/BaseMixin.js

@@ -1,23 +1,20 @@
+import { getOptionProps } from './props-util';
+
 export default {
-  // directives: {
-  //   ref: {
-  //     bind: function (el, binding, vnode) {
-  //       binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
-  //     },
-  //     update: function (el, binding, vnode) {
-  //       binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
-  //     },
-  //     unbind: function (el, binding, vnode) {
-  //       binding.value(null)
-  //     },
-  //   },
-  // },
   methods: {
-    setState(state, callback) {
-      const newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
-      // if (this.getDerivedStateFromProps) {
-      //   Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), { ...this.$data, ...newState }, true) || {})
-      // }
+    setState(state = {}, callback) {
+      let newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
+      if (this.getDerivedStateFromProps) {
+        const s = this.getDerivedStateFromProps(getOptionProps(this), {
+          ...this.$data,
+          ...newState,
+        });
+        if (s === null) {
+          return;
+        } else {
+          newState = { ...newState, ...(s || {}) };
+        }
+      }
       Object.assign(this.$data, newState);
       this.$forceUpdate();
       this.$nextTick(() => {

components/locale-provider/__tests__/__snapshots__/index.test.js.snap

@@ -1,4 +1,4 @@
-// based on rc-calendar 9.15.8
+// based on rc-calendar 9.15.10
 import Vue from 'vue';
 import ref from 'vue-ref';
 import Calendar from './src/';

components/vc-calendar/index.js

@@ -22,6 +22,7 @@ const getMomentObjectIfValid = date => {
 };
 
 const Calendar = {
+  name: 'Calendar',
   props: {
     locale: PropTypes.object.def(enUs),
     format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
@@ -358,6 +359,7 @@ const Calendar = {
             showDateInput={props.showDateInput}
             timePicker={timePicker}
             selectedValue={sSelectedValue}
+            timePickerDisabled={!sSelectedValue}
             value={sValue}
             disabledDate={disabledDate}
             okDisabled={

components/vc-calendar/src/Calendar.jsx

@@ -9,6 +9,7 @@ import CommonMixin from './mixin/CommonMixin';
 import CalendarHeader from './full-calendar/CalendarHeader';
 import enUs from './locale/en_US';
 const FullCalendar = {
+  name: 'FullCalendar',
   props: {
     locale: PropTypes.object.def(enUs),
     format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),

components/vc-calendar/src/FullCalendar.jsx

@@ -8,6 +8,7 @@ import CalendarMixin from './mixin/CalendarMixin';
 import CommonMixin from './mixin/CommonMixin';
 import enUs from './locale/en_US';
 const MonthCalendar = {
+  name: 'MonthCalendar',
   props: {
     locale: PropTypes.object.def(enUs),
     format: PropTypes.string,

components/vc-calendar/src/MonthCalendar.jsx

@@ -39,10 +39,10 @@ const DateInput = {
   },
   watch: {
     selectedValue() {
-      this.updateState();
+      this.setState();
     },
     format() {
-      this.updateState();
+      this.setState();
     },
   },
 
@@ -62,19 +62,21 @@ const DateInput = {
     return dateInputInstance;
   },
   methods: {
-    updateState() {
+    getDerivedStateFromProps(nextProps, state) {
+      let newState = {};
       if (dateInputInstance) {
         cachedSelectionStart = dateInputInstance.selectionStart;
         cachedSelectionEnd = dateInputInstance.selectionEnd;
       }
       // when popup show, click body will call this, bug!
-      const selectedValue = this.selectedValue;
-      if (!this.$data.hasFocus) {
-        this.setState({
+      const selectedValue = nextProps.selectedValue;
+      if (!state.hasFocus) {
+        newState = {
           str: formatDate(selectedValue, this.format),
           invalid: false,
-        });
+        };
       }
+      return newState;
     },
     onClear() {
       this.setState({

components/vc-calendar/src/date/DateInput.jsx

@@ -3,6 +3,7 @@ import BaseMixin from '../../../_util/BaseMixin';
 import { getMonthName } from '../util';
 
 const CalendarHeader = {
+  name: 'CalendarHeader',
   mixins: [BaseMixin],
   props: {
     value: PropTypes.object,

components/vc-calendar/src/full-calendar/CalendarHeader.jsx

@@ -5,15 +5,10 @@ import { getTodayTime, getMonthName } from '../util/index';
 const ROW = 4;
 const COL = 3;
 
-function chooseMonth(month) {
-  const next = this.sValue.clone();
-  next.month(month);
-  this.setAndSelectValue(next);
-}
-
 function noop() {}
 
 const MonthTable = {
+  name: 'MonthTable',
   mixins: [BaseMixin],
   props: {
     cellRender: PropTypes.func,
@@ -42,7 +37,11 @@ const MonthTable = {
       });
       this.__emit('select', value);
     },
-
+    chooseMonth(month) {
+      const next = this.sValue.clone();
+      next.month(month);
+      this.setAndSelectValue(next);
+    },
     months() {
       const value = this.sValue;
       const current = value.clone();
@@ -107,7 +106,7 @@ const MonthTable = {
           <td
             role="gridcell"
             key={monthData.value}
-            onClick={disabled ? noop : chooseMonth.bind(this, monthData.value)}
+            onClick={disabled ? noop : () => this.chooseMonth(monthData.value)}
             title={monthData.title}
             class={classNameMap}
           >