diff --git a/README.md b/README.md index 8c58cc01..0b07010b 100644 --- a/README.md +++ b/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 =============================== diff --git a/package.json b/package.json index 3e68b209..72db8a4e 100644 --- a/package.json +++ b/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": { diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 35439df3..9f91f589 100644 --- a/src/DateTimeField.js +++ b/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} />
+ | - | - | + | |||
- |