Research about controlling datepicker #2

metasfresh · Nov 17, 2016 · 582c874 · 582c874
1 parent 681289f
commit 582c874
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "react-addons-css-transition-group": "~15.3.1",
     "react-addons-update": "~15.3.1",
     "react-bootstrap-daterangepicker": "~3.2.2",
-    "react-datetime": "~2.7",
+    "react-datetime": "~2.7.1",
     "react-debounce-input": "~2.4.0",
     "react-dnd": "~2.1.4",
     "react-dnd-html5-backend": "~2.1.2",

diff --git a/src/actions/WindowActions.js b/src/actions/WindowActions.js
@@ -148,6 +148,7 @@ export function createWindow(windowType, docId = "NEW", tabId, rowId, isModal =
                 }
 
                 docId = response.data[0].id;
+                console.log(response.data)
                 const preparedData = nullToEmptyStrings(response.data[0].fields);
 
                 dispatch(initDataSuccess(preparedData, getScope(isModal)));

diff --git a/src/components/RawWidget.js b/src/components/RawWidget.js
@@ -88,11 +88,11 @@ class RawWidget extends Component {
                                 dateFormat={true}
                                 inputProps={{
                                     placeholder: widgetFields.emptyText,
-                                    disabled: widgetData.readonly,
-                                    onBlur: (e) => handlePatch(widgetField, Moment(e.target.value).format('YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                                    disabled: widgetData.readonly
                                 }}
                                 value={selectedField}
-                                // onChange={(date) => handleChange(widgetField, date)}
+                                onChange={(date) => handleChange(widgetField, date)}
+                                patch={(date) => handlePatch(widgetField, Moment(date).format('YYYY-MM-DDTHH:mm:ss.SSSZ'))}
                             />
                             <i className="meta-icon-calendar input-icon-right"></i>
                         </div>

diff --git a/src/components/widget/DatePicker.js b/src/components/widget/DatePicker.js
@@ -9,27 +9,28 @@ class DatePicker extends Component {
         super(props);
 
         this.state = {
-            open: undefined
+            open: false
         }
     }
 
+    handleBlur = (date) => {
+        const {patch} = this.props;
+        this.handleClose();
+        patch(date);
+    }
+
     handleFocus = () => {
         this.setState(Object.assign({}, this.state, {
             open: true
         }));
     }
 
     handleClose = () => {
-        const {patch} = this.props;
         this.setState(Object.assign({}, this.state, {
             open: false
         }));
     }
 
-    focusInput = () => {
-        console.log(this.picker._reactInternalInstance._currentElement)
-    }
-
     handleClickOutside = () => {
 		this.handleClose();
 	}
@@ -38,7 +39,7 @@ class DatePicker extends Component {
         return (
             <td
                 {...props}
-                onDoubleClick={this.handleClose}
+                onDoubleClick={() => this.handleClose()}
             >
                 {currentDate.date()}
             </td>
@@ -48,16 +49,15 @@ class DatePicker extends Component {
     render() {
         const {open} = this.state;
         return (<Datetime
-            className={open && "rdtOpen"}
-            onFocus={this.handleFocus}
-            ref={c => this.picker = c}
-            onChange={this.focusInput}
+            // open={open}
+            closeOnTab={true}
             renderDay={this.renderDay}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
             {...this.props}
         />)
     }
 }
 
-DatePicker = connect()(onClickOutside(DatePicker))
 
 export default DatePicker