fix: 更新日期组件版本和提取dateRender组件

demo/TableDemo.scss

@@ -24,11 +24,13 @@
 
 .editable-cell-text-wrapper {
   padding: 5px 24px 5px 5px;
+  height: 30px;
 }
 
 .editable-cell-icon,
 .editable-cell-icon-check {
   position: absolute;
+  top: 0;
   right: 0;
   width: 20px;
   cursor: pointer;

demo/demolist/Demo15.js

@@ -24,6 +24,7 @@ import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
 
 const format = "YYYY-MM-DD";
 const format2 = "YYYY-MM";
+const format3 = "YYYY-MM-DD HH:mm:ss";
 
 const dateInputPlaceholder = "选择日期";
 const dateInputPlaceholder2 = "选择年月";
@@ -37,25 +38,37 @@ class Demo15 extends React.Component {
           key: "0",
           name: "沉鱼",
           age: "y",
-          address: "96, 77, 89"
+          address: "96, 77, 89",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02",
+          TimePicker: "2017-09-15 15:24:48"
         },
         {
           key: "1",
           name: "落雁",
           age: "y",
-          address: "90, 70, 80"
+          address: "90, 70, 80",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02",
+          TimePicker: "2017-09-15 15:24:48"
         },
         {
           key: "2",
           name: "闭月",
           age: "n",
-          address: "80, 60, 80"
+          address: "80, 60, 80",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02",
+          TimePicker: "2017-09-15 15:24:48"
         },
         {
           key: "3",
           name: "羞花",
           age: "y",
-          address: "120, 60, 90"
+          address: "120, 60, 90",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02",
+          TimePicker: "2017-09-15 15:24:48"
         }
       ],
       count: 4
@@ -109,16 +122,18 @@ class Demo15 extends React.Component {
         }
       },
       {
-        title: "日期",
+        title: "年月日",
         dataIndex: "datepicker",
         key: "datepicker",
         width: "200px",
-        render: () => {
+        render: (text, record, index) => {
           return (
-            <DatePicker
+            <DateRender
+              value={text}
+              isclickTrigger={true}
               format={format}
-              onSelect={this.onSelect}
-              onChange={this.onChange}
+              onSelect={this.onDateSelect}
+              onChange={this.onDateChange}
               placeholder={dateInputPlaceholder}
             />
           );
@@ -129,9 +144,11 @@ class Demo15 extends React.Component {
         dataIndex: "MonthPicker",
         key: "MonthPicker",
         width: "200px",
-        render: () => {
+        render: (text, record, index) => {
           return (
-            <MonthPicker
+            <DateRender
+              value={text}
+              isclickTrigger={true}
               format={format2}
               onSelect={this.onSelect}
               onChange={this.onChange}
@@ -141,11 +158,20 @@ class Demo15 extends React.Component {
         }
       },
       {
-        title: "周",
-        dataIndex: "WeekPicker",
-        key: "WeekPicker",
-        render: () => {
-          return <WeekPicker placeholder="选择周" />;
+        title: "日期",
+        dataIndex: "TimePicker",
+        key: "TimePicker",
+        render: (text, record, index) => {
+          return (
+            <DateRender
+              value={text}
+              format={format3}
+              isclickTrigger={true}
+              onSelect={this.onDateSelect}
+              onChange={this.onDateChange}
+              placeholder={dateInputPlaceholder}
+            />
+          );
         }
       }
     ];
@@ -168,6 +194,12 @@ class Demo15 extends React.Component {
   onSelectChange = value => {
     console.log(`selected ${value}`);
   };
+  onDateChange = d => {
+    console.log(d);
+  };
+  onDateSelect = d => {
+    console.log(d);
+  };
   onDelete = index => {
     return () => {
       const dataSource = [...this.state.dataSource];
@@ -200,15 +232,6 @@ class Demo15 extends React.Component {
       </Animate>
     );
   };
-
-  onSelect = d => {
-    console.log(d);
-  };
-
-  onChange = d => {
-    console.log(d);
-  };
-
   render() {
     const { dataSource } = this.state;
     const columns = this.columns;

package.json

@@ -43,7 +43,7 @@
     "bee-animate": "latest",
     "bee-button": "latest",
     "bee-checkbox": "^0.2.4",
-    "bee-datepicker": "^0.1.3",
+    "bee-datepicker": "^0.1.7",
     "bee-form-control": "^0.1.8",
     "bee-icon": "0.0.5",
     "bee-input-group": "^0.1.12",

src/Table.scss

@@ -93,8 +93,8 @@ $table-move-in-color: $bg-color-base;
   }
 
   &-footer {
-    padding: $vertical-padding $horizontal-padding;
-    border-bottom: 1px solid $table-border-color;
+    // padding: $vertical-padding $horizontal-padding;
+    // border-bottom: 1px solid $table-border-color;
   }
 
   &-placeholder {

src/render/DateRender.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import Icon from "bee-icon";
 import DatePicker from "bee-datepicker";
+import moment from "moment";
 
 export default class DateRender extends Component {
   state = {
@@ -8,9 +9,15 @@ export default class DateRender extends Component {
     editable: false
   };
   handleChange = e => {
-      debugger;
-    const value = e.target.value;
+    let { format } = this.props || "YYYY-MM-DD";
+    const value = e.format(format);
     this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+    setTimeout(() => {
+      this.setState({ editable: false });
+    }, 0);
   };
   check = () => {
     this.setState({ editable: false });
@@ -31,14 +38,28 @@ export default class DateRender extends Component {
     const { value, editable } = this.state;
     let { isclickTrigger } = this.props;
     let cellContent = "";
+    let date_value = moment(value);
     if (editable) {
       cellContent = isclickTrigger ? (
         <div className="editable-cell-input-wrapper">
-          <DatePicker onChange={this.handleChange} />
+          <DatePicker
+            {...this.props}
+            value={date_value}
+            onChange={this.handleChange}
+          />
+          <Icon
+            type="uf-correct"
+            className="editable-cell-icon-check"
+            onClick={this.check}
+          />
         </div>
       ) : (
         <div className="editable-cell-input-wrapper">
-          <DatePicker {...this.props} onChange={this.handleChange}/>
+          <DatePicker
+            {...this.props}
+            value={date_value}
+            onChange={this.handleChange}
+          />
           <Icon
             type="uf-correct"
             className="editable-cell-icon-check"

src/render/SelectRender.js

@@ -9,13 +9,12 @@ export default class SelectRender extends Component {
   };
   handleChange = e => {
     const value = e;
-    let self = this;
-    if (self.props.onChange) {
-      self.props.onChange(value);
+    if (this.props.onChange) {
+      this.props.onChange(value);
     }
     this.setState({ value: value });
-    setTimeout(function() {
-      self.setState({ editable: false });
+    setTimeout(()=> {
+      this.setState({ editable: false });
     }, 0);
   };
   check = () => {