From bec5d311a046b6370bb48f05c878808e158c5d62 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 15 Jun 2016 17:46:25 +0800
Subject: [PATCH] Improve DatePicker start-end demo expierence

---
 components/date-picker/createPicker.jsx  |  1 +
 components/date-picker/demo/start-end.md | 22 ++++++++++++++++++++--
 components/date-picker/wrapPicker.jsx    | 18 +++---------------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/components/date-picker/createPicker.jsx b/components/date-picker/createPicker.jsx
index a80af44052..f88cf713cc 100644
--- a/components/date-picker/createPicker.jsx
+++ b/components/date-picker/createPicker.jsx
@@ -81,6 +81,7 @@ export default function createPicker(TheCalendar) {
             style={props.popupStyle}
             align={props.align}
             getCalendarContainer={props.getCalendarContainer}
+            open={props.open}
             onOpen={props.toggleOpen}
             onClose={props.toggleOpen}
             onChange={this.handleChange}
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index 5f488460c0..4747d5ed6c 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -13,6 +13,7 @@ const DateRange = React.createClass({
     return {
       startValue: null,
       endValue: null,
+      endOpen: false,
     };
   },
   disabledStartDate(startValue) {
@@ -39,18 +40,35 @@ const DateRange = React.createClass({
   onEndChange(value) {
     this.onChange('endValue', value);
   },
+  handleStartToggle({ open }) {
+    if (!open) {
+      this.setState({ endOpen: true });
+    }
+  },
+  handleEndToggle({ open }) {
+    this.setState({ endOpen: open });
+  },
   render() {
     return (
       <div>
-        <DatePicker disabledDate={this.disabledStartDate}
+        <DatePicker
+          disabledDate={this.disabledStartDate}
+          showTime
+          format="yyyy-MM-dd HH:mm:ss"
           value={this.state.startValue}
           placeholder="开始日期"
           onChange={this.onStartChange}
+          toggleOpen={this.handleStartToggle}
         />
-        <DatePicker disabledDate={this.disabledEndDate}
+        <DatePicker
+          disabledDate={this.disabledEndDate}
+          showTime
+          format="yyyy-MM-dd HH:mm:ss"
           value={this.state.endValue}
           placeholder="结束日期"
           onChange={this.onEndChange}
+          open={this.state.endOpen}
+          toggleOpen={this.handleEndToggle}
         />
       </div>
     );
diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx
index 63601a35d6..80db3cb5f5 100644
--- a/components/date-picker/wrapPicker.jsx
+++ b/components/date-picker/wrapPicker.jsx
@@ -18,19 +18,12 @@ export default function wrapPicker(Picker, defaultFormat) {
       align: {
         offset: [0, -9],
       },
-      open: false,
     }
 
     static contextTypes = {
       antLocale: PropTypes.object,
     }
 
-    constructor(props) {
-      super(props);
-
-      this.state = {};
-    }
-
     // remove input readonly warning
     handleInputChange() {}
 
@@ -66,19 +59,14 @@ export default function wrapPicker(Picker, defaultFormat) {
       return value;
     }
 
-    toggleOpen = (e) => {
-      this.setState({
-        open: e.open,
-      });
-      this.props.toggleOpen(e);
+    toggleOpen = ({ open }) => {
+      this.props.toggleOpen({ open });
     }
 
     render() {
       const props = this.props;
-      const state = this.state;
       const pickerClass = classNames({
         'ant-calendar-picker': true,
-        'ant-calendar-picker-open': state.open,
       });
       const pickerInputClass = classNames({
         'ant-calendar-range-picker': true,
@@ -108,7 +96,7 @@ export default function wrapPicker(Picker, defaultFormat) {
 
       return (
         <Picker
-          {...this.props}
+          {...props}
           pickerClass={pickerClass}
           pickerInputClass={pickerInputClass}
           locale={locale}