From 816bd01565f57541d62709d05a1bb7b5012f5b18 Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Fri, 11 Sep 2015 17:22:16 +0700 Subject: [PATCH 1/8] add basic keyboard support for time picker mode and disable tab stops for picker --- src/DateTimeField.js | 30 ++++++++++++++++++++++++++++-- src/DateTimePickerTime.js | 12 ++++++------ 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 35439df3..9b21f281 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -249,7 +249,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.dtbinput.getDOMNode().focus(); let classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { return this.closePicker(); @@ -356,8 +382,8 @@ export default class DateTimeField extends Component { widgetStyle={this.state.widgetStyle} />
- - + +
); diff --git a/src/DateTimePickerTime.js b/src/DateTimePickerTime.js index aba00a30..7782267a 100644 --- a/src/DateTimePickerTime.js +++ b/src/DateTimePickerTime.js @@ -65,11 +65,11 @@ export default class DateTimePickerTime extends Component { - + - + - + @@ -83,15 +83,15 @@ export default class DateTimePickerTime extends Component { - + - + - + From 3842ce8b9f0a7d25520fa0148dafb90f77017ac9 Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Fri, 11 Sep 2015 17:30:00 +0700 Subject: [PATCH 2/8] fix typo --- src/DateTimeField.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 9b21f281..1f1e56a0 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -275,7 +275,7 @@ export default class DateTimeField extends Component { } onClick = () => { - this.refs.dtbinput.getDOMNode().focus(); + this.refs.dtpinput.getDOMNode().focus(); let classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { return this.closePicker(); @@ -382,7 +382,7 @@ export default class DateTimeField extends Component { widgetStyle={this.state.widgetStyle} />
- +
From 24d5e0b7d705b73645c295fa20ef4eeb45d089dc Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Fri, 11 Sep 2015 17:42:48 +0700 Subject: [PATCH 3/8] update readme info --- README.md | 4 +++- package.json | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) 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..a53afba7 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "react-bootstrap-datetimepicker", "version": "0.0.20", "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": { From 18f6a21f224d79c9d46284c15c209676e9c0f880 Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Tue, 15 Sep 2015 01:39:33 +0700 Subject: [PATCH 4/8] add getValue() to retrieve value on demand --- package.json | 2 +- src/DateTimeField.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a53afba7..a859c381 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-bootstrap-datetimepicker", + "name": "@thethanghn/react-bootstrap-datetimepicker", "version": "0.0.20", "description": "A bootstrap datetime picker component for React.js", "homepage": "http://github.com/thethanghn/react-bootstrap-datetimepicker/", diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 1f1e56a0..9b988308 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -346,6 +346,10 @@ export default class DateTimeField extends Component { } } + getValue() { + return this.refs.dtpinput.getValue(); + } + render() { return (
From 48c2687bcf77761189c9375b9276ace81aee7c75 Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Tue, 15 Sep 2015 01:40:18 +0700 Subject: [PATCH 5/8] update version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a859c381..0236a745 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thethanghn/react-bootstrap-datetimepicker", - "version": "0.0.20", + "version": "0.0.21", "description": "A bootstrap datetime picker component for React.js", "homepage": "http://github.com/thethanghn/react-bootstrap-datetimepicker/", "repository": { From f0eed277147f086b758b7fce99c3d0982281cb8b Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Tue, 15 Sep 2015 09:12:59 +0700 Subject: [PATCH 6/8] remove duplicated method --- package.json | 2 +- src/DateTimeField.js | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index 0236a745..91e86211 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thethanghn/react-bootstrap-datetimepicker", - "version": "0.0.21", + "version": "0.0.22", "description": "A bootstrap datetime picker component for React.js", "homepage": "http://github.com/thethanghn/react-bootstrap-datetimepicker/", "repository": { diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 9b988308..1f1e56a0 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -346,10 +346,6 @@ export default class DateTimeField extends Component { } } - getValue() { - return this.refs.dtpinput.getValue(); - } - render() { return (
From 94b1ee11b4be775e40b07c2c0089ad84d1907981 Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Mon, 21 Sep 2015 15:00:35 +0700 Subject: [PATCH 7/8] update API --- src/DateTimeField.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 1f1e56a0..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)); }); }); } From fb2bef6dbe41fb227a952671d78efbca0d395838 Mon Sep 17 00:00:00 2001 From: Nguyen The Thang Date: Mon, 21 Sep 2015 15:05:37 +0700 Subject: [PATCH 8/8] update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 91e86211..72db8a4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thethanghn/react-bootstrap-datetimepicker", - "version": "0.0.22", + "version": "0.0.23", "description": "A bootstrap datetime picker component for React.js", "homepage": "http://github.com/thethanghn/react-bootstrap-datetimepicker/", "repository": {