add basic keyboard support for time picker mode and disable tab stops

README.md

@@ -1,7 +1,9 @@
 react-bootstrap-datetimepicker
 ===============================
 
-This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js
+This project is a fork of http://dev.quri.com/react-bootstrap-datetimepicker
+
+It adds some basic keyboard for time picker only.
 
 Usage
 ===============================

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "react-bootstrap-datetimepicker",
-  "version": "0.0.20",
+  "name": "@thethanghn/react-bootstrap-datetimepicker",
+  "version": "0.0.23",
   "description": "A bootstrap datetime picker component for React.js",
-  "homepage": "http://dev.quri.com/react-bootstrap-datetimepicker/",
+  "homepage": "http://github.com/thethanghn/react-bootstrap-datetimepicker/",
   "repository": {
     "type": "git",
-    "url": "http://github.com/quri/react-bootstrap-datetimepicker"
+    "url": "http://github.com/thethanghn/react-bootstrap-datetimepicker"
   },
   "main": "./lib/DateTimeField.js",
   "scripts": {

src/DateTimeField.js

@@ -99,6 +99,10 @@ export default class DateTimeField extends Component {
     return moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format);
   }
 
+  getMomentValue = () => {
+    return this.state.inputValue ? moment(this.state.inputValue, this.props.inputFormat, true) : null;
+  }
+
   setSelectedDate = (e) => {
     const { target } = e;
     if (target.className && !target.className.match(/disabled/g)) {
@@ -158,9 +162,10 @@ export default class DateTimeField extends Component {
     return this.setState({
       selectedDate: this.state.selectedDate.clone().add(1, "minutes")
     }, function() {
-      this.props.onChange(this.state.selectedDate.format(this.props.format));
       return this.setState({
         inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
+      }, function() {
+        return this.props.onChange(this.state.selectedDate.format(this.props.format));
       });
     });
   }
@@ -169,9 +174,10 @@ export default class DateTimeField extends Component {
     return this.setState({
       selectedDate: this.state.selectedDate.clone().add(1, "hours")
     }, function() {
-      this.props.onChange(this.state.selectedDate.format(this.props.format));
       return this.setState({
         inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
+      }, function() {
+        return this.props.onChange(this.state.selectedDate.format(this.props.format));
       });
     });
   }
@@ -198,9 +204,10 @@ export default class DateTimeField extends Component {
     return this.setState({
       selectedDate: this.state.selectedDate.clone().subtract(1, "minutes")
     }, () => {
-      this.props.onChange(this.state.selectedDate.format(this.props.format));
       return this.setState({
         inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
+      }, function() {
+        return this.props.onChange(this.state.selectedDate.format(this.props.format));
       });
     });
   }
@@ -209,9 +216,10 @@ export default class DateTimeField extends Component {
     return this.setState({
       selectedDate: this.state.selectedDate.clone().subtract(1, "hours")
     }, () => {
-      this.props.onChange(this.state.selectedDate.format(this.props.format));
       return this.setState({
         inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
+      }, function() {
+        return this.props.onChange(this.state.selectedDate.format(this.props.format));
       });
     });
   }
@@ -249,7 +257,33 @@ export default class DateTimeField extends Component {
     });
   }
 
+  onKeyDown = (e) => {
+    if (this.props.mode == Constants.MODE_TIME) {
+      switch(e.which) {
+        case  40:
+          if (!this.state.showPicker) {
+            this.onClick();
+          } else {
+            this.addMinute();
+          }
+
+          break;
+        case 38:
+          this.subtractMinute();
+          break;
+        case 27: //escape
+        case 13: //enter
+        case 9:  //tab
+          if (this.state.showPicker) {
+            this.closePicker();
+          }
+          break;
+      }  
+    }
+  }
+
   onClick = () => {
+    this.refs.dtpinput.getDOMNode().focus();
     let classes, gBCR, offset, placePosition, scrollTop, styles;
     if (this.state.showPicker) {
       return this.closePicker();
@@ -356,8 +390,8 @@ export default class DateTimeField extends Component {
                   widgetStyle={this.state.widgetStyle}
             />
             <div className="input-group date" ref="datetimepicker">
-              <input type="text" className="form-control" onChange={this.onChange} value={this.state.inputValue} {...this.props.inputProps}/>
-              <span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph={this.state.buttonIcon} /></span>
+              <input type="text" className="form-control" ref="dtpinput" onKeyDown={this.onKeyDown} onChange={this.onChange} value={this.state.inputValue} {...this.props.inputProps}/>
+              <span className="input-group-addon" onClick={this.onClick} ref="dtpbutton"><Glyphicon glyph={this.state.buttonIcon} /></span>
             </div>
           </div>
     );

src/DateTimePickerTime.js

@@ -65,11 +65,11 @@ export default class DateTimePickerTime extends Component {
         <table className="table-condensed">
           <tbody>
             <tr>
-              <td><a className="btn" onClick={this.props.addHour}><Glyphicon glyph="chevron-up" /></a></td>
+              <td><a tabIndex="-1" className="btn" onClick={this.props.addHour}><Glyphicon glyph="chevron-up" /></a></td>
 
-              <td className="separator"></td>
+              <td className="separator" onKeyUp={this.onKeyUp}></td>
 
-              <td><a className="btn" onClick={this.props.addMinute}><Glyphicon glyph="chevron-up" /></a></td>
+              <td><a tabIndex="-1" className="btn" onClick={this.props.addMinute}><Glyphicon glyph="chevron-up" /></a></td>
 
               <td className="separator"></td>
             </tr>
@@ -83,15 +83,15 @@ export default class DateTimePickerTime extends Component {
 
               <td className="separator"></td>
 
-              <td><button className="btn btn-primary" onClick={this.props.togglePeriod} type="button">{this.props.selectedDate.format("A")}</button></td>
+              <td><button tabIndex="-1" className="btn btn-primary" onClick={this.props.togglePeriod} type="button">{this.props.selectedDate.format("A")}</button></td>
             </tr>
 
             <tr>
-              <td><a className="btn" onClick={this.props.subtractHour}><Glyphicon glyph="chevron-down" /></a></td>
+              <td><a tabIndex="-1" className="btn" onClick={this.props.subtractHour}><Glyphicon glyph="chevron-down" /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn" onClick={this.props.subtractMinute}><Glyphicon glyph="chevron-down" /></a></td>
+              <td><a tabIndex="-1" className="btn" onClick={this.props.subtractMinute}><Glyphicon glyph="chevron-down" /></a></td>
 
               <td className="separator"></td>
             </tr>