Fix RangePicker input (#9009)

fix #6999 fix react-component/calendar#286
ant-design · Jan 31, 2018 · 842c7f2 · 842c7f2
1 parent 99469bd
commit 842c7f2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
@@ -150,6 +150,13 @@ export default class RangePicker extends React.Component<any, RangePickerState>
 
   handleHoverChange = (hoverValue: any) => this.setState({ hoverValue });
 
+  handleCalendarInputSelect = (value: RangePickerValue) => {
+    this.setState(({ showDate }) => ({
+      value,
+      showDate: getShowDateFromValue(value) || showDate,
+    }));
+  }
+
   setValue(value: RangePickerValue, hidePanel?: boolean) {
     this.handleChange(value);
     if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
@@ -263,6 +270,7 @@ export default class RangePicker extends React.Component<any, RangePickerState>
         onHoverChange={this.handleHoverChange}
         onPanelChange={props.onPanelChange}
         showToday={showToday}
+        onInputSelect={this.handleCalendarInputSelect}
       />
     );
 

diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js
@@ -133,4 +133,13 @@ describe('RangePicker', () => {
     ).toBe(true);
     resetMockDate();
   });
+
+  // https://github.com/ant-design/ant-design/issues/6999
+  it('input date manually', () => {
+    const wrapper = mount(<RangePicker open />);
+    const dateString = '2008-12-31';
+    const input = wrapper.find('.ant-calendar-input').first();
+    input.simulate('change', { target: { value: dateString } });
+    expect(input.getDOMNode().value).toBe(dateString);
+  });
 });