Let users input a free value in the input

Author: chollier

src/DateTimeField.jsx

@@ -51,18 +51,21 @@ DateTimeField = React.createClass({
     });
   },
   onChange: function(event) {
-    if (moment(event.target.value, this.props.format).isValid()) {
+    if (moment(event.target.value, this.props.inputFormat).isValid()) {
       this.setState({
-        selectedDate: moment(event.target.value, this.props.format),
-        inputValue: moment(event.target.value, this.props.format).format(this.props.inputFormat)
+        selectedDate: moment(event.target.value, this.props.inputFormat),
+        viewDate: moment(event.target.value, this.props.inputFormat).startOf("month")
       });
-    } else {
-      this.setState({
-        inputValue: event.target.value
-      });
-      console.log("This is not a valid date");
     }
-    return this.props.onChange(this.state.selectedDate.format(this.props.format));
+
+    return this.setState({
+      inputValue: event.target.value
+    }, function() {
+      console.log(this.state.inputValue);
+      console.log(moment(this.state.inputValue, this.props.inputFormat, true).calendar());
+      return this.props.onChange(moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format));
+    });
+
   },
   setSelectedDate: function(e) {
     return this.setState({
@@ -285,7 +288,7 @@ DateTimeField = React.createClass({
                   togglePeriod={this.togglePeriod}
             />
             <div className="input-group date" ref="datetimepicker">
-              <input type="text" className="form-control" onChange={this.onChange} value={this.state.selectedDate.format(this.props.inputFormat)} />
+              <input type="text" className="form-control" onChange={this.onChange} value={this.state.inputValue} />
               <span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph="calendar" /></span>
             </div>
           </div>