Control Calendar value, fix #8885 (#9141)

If not control Calendar value, the internal value of Calendar will keep a
different date than parent component.

components/date-picker/__tests__/DatePicker.test.js

@@ -3,11 +3,20 @@ import { mount } from 'enzyme';
 import moment from 'moment';
 import MockDate from 'mockdate';
 import DatePicker from '..';
+import { selectDate } from './utils';
 import focusTest from '../../../tests/shared/focusTest';
 
 describe('DatePicker', () => {
   focusTest(DatePicker);
 
+  beforeEach(() => {
+    MockDate.set(new Date('2016-11-22').getTime() + (new Date().getTimezoneOffset() * 60 * 1000));
+  });
+
+  afterEach(() => {
+    MockDate.reset();
+  });
+
   it('prop locale should works', () => {
     const locale = {
       lang: {
@@ -46,12 +55,59 @@ describe('DatePicker', () => {
         placeholder: 'Избор на час',
       },
     };
-    MockDate.set(new Date('2016-11-22').getTime() + (new Date().getTimezoneOffset() * 60 * 1000));
     const birthday = moment('2000-01-01', 'YYYY-MM-DD');
     const wrapper = mount(
       <DatePicker open locale={locale} value={birthday} />
     );
     expect(wrapper.render()).toMatchSnapshot();
-    MockDate.reset();
+  });
+
+  // Fix https://github.com/ant-design/ant-design/issues/8885
+  it('control value after panel closed', () => {
+    class Test extends React.Component {
+      state = {
+        cleared: false,
+        value: moment(),
+      }
+
+      onChange = (value) => {
+        let cleared = this.state.cleared;
+
+        if (cleared) {
+          value = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
+          cleared = false;
+        }
+
+        if (!value) {
+          cleared = true;
+        }
+
+        this.setState({ value, cleared });
+      }
+
+      render() {
+        return (
+          <div>
+            <DatePicker
+              showTime
+              value={this.state.value}
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={this.onChange}
+            />
+          </div>
+        );
+      }
+    }
+
+    const wrapper = mount(<Test />);
+    // clear input
+    wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click');
+    // open panel
+    wrapper.find('.ant-calendar-picker-input').simulate('click');
+    // select a date
+    selectDate(wrapper, moment('2016-11-13'));
+    expect(wrapper.find('.ant-calendar-input').getDOMNode().value).toBe('2016-11-13 12:12:12');
+    selectDate(wrapper, moment('2016-11-14'));
+    expect(wrapper.find('.ant-calendar-input').getDOMNode().value).toBe('2016-11-14 12:12:12');
   });
 });

components/date-picker/__tests__/utils.js

@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+export function selectDate(wrapper, date, index) {
+  let calendar = wrapper;
+  if (index) {
+    calendar = wrapper.find('.ant-calendar-range-part')[index];
+  }
+  calendar.find({ title: date.format('LL') }).simulate('click');
+}

components/date-picker/createPicker.tsx

@@ -95,6 +95,10 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
         [`${prefixCls}-month`]: MonthCalendar === TheCalendar,
       });
 
+      if (value && localeCode) {
+        value.locale(localeCode);
+      }
+
       let pickerProps: Object = {};
       let calendarProps: any = {};
       if (props.showTime) {
@@ -130,6 +134,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
           monthCellContentRender={props.monthCellContentRender}
           renderFooter={this.renderFooter}
           onPanelChange={props.onPanelChange}
+          value={value}
         />
       );
 
@@ -156,10 +161,6 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
         </div>
       );
 
-      const pickerValue = value;
-      if (pickerValue && localeCode) {
-        pickerValue.locale(localeCode);
-      }
       return (
         <span
           className={classNames(props.className, props.pickerClass)}
@@ -171,7 +172,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
             {...props}
             {...pickerProps}
             calendar={calendar}
-            value={pickerValue}
+            value={value}
             prefixCls={`${prefixCls}-picker-container`}
             style={props.popupStyle}
           >