Skip to content
This repository was archived by the owner on Nov 16, 2018. It is now read-only.

Commit 7629540

Browse files
chollierchollier
committed
Lets select hours and minutes
1 parent 8d11e76 commit 7629540

10 files changed

+182
-52
lines changed

‎src/DateTimeField.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,28 @@ DateTimeField = React.createClass({
6767
});
6868
});
6969
},
70+
setSelectedHour: function(e) {
71+
return this.setState({
72+
selectedDate: this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes())
73+
}, function() {
74+
this.closePicker();
75+
this.props.onChange(this.state.selectedDate.format(this.props.format));
76+
return this.setState({
77+
inputValue: this.state.selectedDate.format("MM/DD/YY H:mm A")
78+
});
79+
});
80+
},
81+
setSelectedMinute: function(e) {
82+
return this.setState({
83+
selectedDate: this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML))
84+
}, function() {
85+
this.closePicker();
86+
this.props.onChange(this.state.selectedDate.format(this.props.format));
87+
return this.setState({
88+
inputValue: this.state.selectedDate.format("MM/DD/YY H:mm A")
89+
});
90+
});
91+
},
7092
setViewMonth: function(month) {
7193
return this.setState({
7294
viewDate: this.state.viewDate.clone().month(month)
@@ -245,6 +267,8 @@ DateTimeField = React.createClass({
245267
setViewYear={this.setViewYear}
246268
setViewMonth={this.setViewMonth}
247269
setSelectedDate={this.setSelectedDate}
270+
setSelectedHour={this.setSelectedHour}
271+
setSelectedMinute={this.setSelectedMinute}
248272
togglePicker={this.togglePicker}
249273
togglePeriod={this.togglePeriod}
250274
/>

‎src/DateTimePicker.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ DateTimePicker = React.createClass({
5555
<DateTimePickerTime
5656
viewDate={this.props.viewDate}
5757
selectedDate={this.props.selectedDate}
58+
setSelectedHour={this.props.setSelectedHour}
59+
setSelectedMinute={this.props.setSelectedMinute}
5860
addHour={this.props.addHour}
5961
subtractHour={this.props.subtractHour}
6062
addMinute={this.props.addMinute}

‎src/DateTimePickerHours.jsx‎

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,72 @@ import React from './react-es6';
44
var DateTimePickerHours;
55

66
DateTimePickerHours = React.createClass({
7+
propTypes: {
8+
setSelectedHour: React.PropTypes.func.isRequired
9+
},
710
render: function() {
811
return (
912
<div className="timepicker-hours" data-action="selectHour" style={{display: 'block'}}>
1013
<table className="table-condensed">
1114
<tbody>
1215
<tr>
13-
<td className="hour">01</td>
16+
<td className="hour" onClick={this.props.setSelectedHour}>01</td>
1417

15-
<td className="hour">02</td>
18+
<td className="hour" onClick={this.props.setSelectedHour}>02</td>
1619

17-
<td className="hour">03</td>
20+
<td className="hour" onClick={this.props.setSelectedHour}>03</td>
1821

19-
<td className="hour">04</td>
22+
<td className="hour" onClick={this.props.setSelectedHour}>04</td>
2023
</tr>
2124

2225
<tr>
23-
<td className="hour">05</td>
26+
<td className="hour" onClick={this.props.setSelectedHour}>05</td>
2427

25-
<td className="hour">06</td>
28+
<td className="hour" onClick={this.props.setSelectedHour}>06</td>
2629

27-
<td className="hour">07</td>
30+
<td className="hour" onClick={this.props.setSelectedHour}>07</td>
2831

29-
<td className="hour">08</td>
32+
<td className="hour" onClick={this.props.setSelectedHour}>08</td>
3033
</tr>
3134

3235
<tr>
33-
<td className="hour">09</td>
36+
<td className="hour" onClick={this.props.setSelectedHour}>09</td>
3437

35-
<td className="hour">10</td>
38+
<td className="hour" onClick={this.props.setSelectedHour}>10</td>
3639

37-
<td className="hour">11</td>
40+
<td className="hour" onClick={this.props.setSelectedHour}>11</td>
3841

39-
<td className="hour">12</td>
42+
<td className="hour" onClick={this.props.setSelectedHour}>12</td>
43+
</tr>
44+
45+
<tr>
46+
<td className="hour" onClick={this.props.setSelectedHour}>13</td>
47+
48+
<td className="hour" onClick={this.props.setSelectedHour}>14</td>
49+
50+
<td className="hour" onClick={this.props.setSelectedHour}>15</td>
51+
52+
<td className="hour" onClick={this.props.setSelectedHour}>16</td>
53+
</tr>
54+
55+
<tr>
56+
<td className="hour" onClick={this.props.setSelectedHour}>17</td>
57+
58+
<td className="hour" onClick={this.props.setSelectedHour}>18</td>
59+
60+
<td className="hour" onClick={this.props.setSelectedHour}>19</td>
61+
62+
<td className="hour" onClick={this.props.setSelectedHour}>20</td>
63+
</tr>
64+
65+
<tr>
66+
<td className="hour" onClick={this.props.setSelectedHour}>21</td>
67+
68+
<td className="hour" onClick={this.props.setSelectedHour}>22</td>
69+
70+
<td className="hour" onClick={this.props.setSelectedHour}>23</td>
71+
72+
<td className="hour" onClick={this.props.setSelectedHour}>24</td>
4073
</tr>
4174
</tbody>
4275
</table>

‎src/DateTimePickerMinutes.jsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,42 @@ import React from './react-es6';
44
var DateTimePickerMinutes;
55

66
DateTimePickerMinutes = React.createClass({
7+
propTypes: {
8+
setSelectedMinute: React.PropTypes.func.isRequired
9+
},
710
render: function() {
811
return (
912
<div className="timepicker-minutes" data-action="selectMinute" style={{display: 'block'}}>
1013
<table className="table-condensed">
1114
<tbody>
1215
<tr>
13-
<td className="minute">00</td>
16+
<td className="minute" onClick={this.props.setSelectedMinute}>00</td>
1417

15-
<td className="minute">05</td>
18+
<td className="minute" onClick={this.props.setSelectedMinute}>05</td>
1619

17-
<td className="minute">10</td>
20+
<td className="minute" onClick={this.props.setSelectedMinute}>10</td>
1821

19-
<td className="minute">15</td>
22+
<td className="minute" onClick={this.props.setSelectedMinute}>15</td>
2023
</tr>
2124

2225
<tr>
23-
<td className="minute">20</td>
26+
<td className="minute" onClick={this.props.setSelectedMinute}>20</td>
2427

25-
<td className="minute">25</td>
28+
<td className="minute" onClick={this.props.setSelectedMinute}>25</td>
2629

27-
<td className="minute">30</td>
30+
<td className="minute" onClick={this.props.setSelectedMinute}>30</td>
2831

29-
<td className="minute">35</td>
32+
<td className="minute" onClick={this.props.setSelectedMinute}>35</td>
3033
</tr>
3134

3235
<tr>
33-
<td className="minute">40</td>
36+
<td className="minute" onClick={this.props.setSelectedMinute}>40</td>
3437

35-
<td className="minute">45</td>
38+
<td className="minute" onClick={this.props.setSelectedMinute}>45</td>
3639

37-
<td className="minute">50</td>
40+
<td className="minute" onClick={this.props.setSelectedMinute}>50</td>
3841

39-
<td className="minute">55</td>
42+
<td className="minute" onClick={this.props.setSelectedMinute}>55</td>
4043
</tr>
4144
</tbody>
4245
</table>

‎src/DateTimePickerTime.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ var DateTimePickerTime;
77

88
DateTimePickerTime = React.createClass({
99
propTypes: {
10+
setSelectedHour: React.PropTypes.func.isRequired,
11+
setSelectedMinute: React.PropTypes.func.isRequired,
1012
subtractHour: React.PropTypes.func.isRequired,
1113
addHour: React.PropTypes.func.isRequired,
1214
subtractMinute: React.PropTypes.func.isRequired,
@@ -35,14 +37,20 @@ DateTimePickerTime = React.createClass({
3537
},
3638
renderMinutes: function() {
3739
if (this.state.minutesDisplayed) {
38-
return (<DateTimePickerMinutes />);
40+
return (<DateTimePickerMinutes
41+
setSelectedMinute={this.props.setSelectedMinute}
42+
/>
43+
);
3944
} else {
4045
return '';
4146
}
4247
},
4348
renderHours: function() {
4449
if (this.state.hoursDisplayed) {
45-
return (<DateTimePickerHours />);
50+
return (<DateTimePickerHours
51+
setSelectedHour={this.props.setSelectedHour}
52+
/>
53+
);
4654
} else {
4755
return '';
4856
}

‎src/coffee/DateTimeField.jsx.coffee‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,18 @@ DateTimeField = React.createClass(
5454
@props.onChange(@state.selectedDate.format(@props.format))
5555
@setState inputValue: @state.selectedDate.format("MM/DD/YY H:mm A")
5656

57+
setSelectedHour: (e) ->
58+
@setState selectedDate: @state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(@state.selectedDate.minutes()), ->
59+
@closePicker()
60+
@props.onChange(@state.selectedDate.format(@props.format))
61+
@setState inputValue: @state.selectedDate.format("MM/DD/YY H:mm A")
62+
63+
setSelectedMinute: (e) ->
64+
@setState selectedDate: @state.selectedDate.clone().hour(@state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)), ->
65+
@closePicker()
66+
@props.onChange(@state.selectedDate.format(@props.format))
67+
@setState inputValue: @state.selectedDate.format("MM/DD/YY H:mm A")
68+
5769
setViewMonth: (month) ->
5870
@setState viewDate: @state.viewDate.clone().month(month)
5971

@@ -218,6 +230,8 @@ DateTimeField = React.createClass(
218230
setViewYear={this.setViewYear}
219231
setViewMonth={this.setViewMonth}
220232
setSelectedDate={this.setSelectedDate}
233+
setSelectedHour={this.setSelectedHour}
234+
setSelectedMinute={this.setSelectedMinute}
221235
togglePicker={this.togglePicker}
222236
togglePeriod={this.togglePeriod}
223237
/>

‎src/coffee/DateTimePicker.jsx.coffee‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ DateTimePicker = React.createClass(
5555
<DateTimePickerTime
5656
viewDate={this.props.viewDate}
5757
selectedDate={this.props.selectedDate}
58+
setSelectedHour={this.props.setSelectedHour}
59+
setSelectedMinute={this.props.setSelectedMinute}
5860
addHour={this.props.addHour}
5961
subtractHour={this.props.subtractHour}
6062
addMinute={this.props.addMinute}

‎src/coffee/DateTimePickerHours.jsx.coffee‎

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,72 @@
44

55
DateTimePickerHours = React.createClass(
66

7+
propTypes:
8+
setSelectedHour: React.PropTypes.func.isRequired
9+
710
render: ->
811
`(
912
<div className="timepicker-hours" data-action="selectHour" style={{display: 'block'}}>
1013
<table className="table-condensed">
1114
<tbody>
1215
<tr>
13-
<td className="hour">01</td>
16+
<td className="hour" onClick={this.props.setSelectedHour}>01</td>
17+
18+
<td className="hour" onClick={this.props.setSelectedHour}>02</td>
19+
20+
<td className="hour" onClick={this.props.setSelectedHour}>03</td>
21+
22+
<td className="hour" onClick={this.props.setSelectedHour}>04</td>
23+
</tr>
24+
25+
<tr>
26+
<td className="hour" onClick={this.props.setSelectedHour}>05</td>
27+
28+
<td className="hour" onClick={this.props.setSelectedHour}>06</td>
29+
30+
<td className="hour" onClick={this.props.setSelectedHour}>07</td>
31+
32+
<td className="hour" onClick={this.props.setSelectedHour}>08</td>
33+
</tr>
34+
35+
<tr>
36+
<td className="hour" onClick={this.props.setSelectedHour}>09</td>
37+
38+
<td className="hour" onClick={this.props.setSelectedHour}>10</td>
39+
40+
<td className="hour" onClick={this.props.setSelectedHour}>11</td>
41+
42+
<td className="hour" onClick={this.props.setSelectedHour}>12</td>
43+
</tr>
44+
45+
<tr>
46+
<td className="hour" onClick={this.props.setSelectedHour}>13</td>
1447

15-
<td className="hour">02</td>
48+
<td className="hour" onClick={this.props.setSelectedHour}>14</td>
1649

17-
<td className="hour">03</td>
50+
<td className="hour" onClick={this.props.setSelectedHour}>15</td>
1851

19-
<td className="hour">04</td>
52+
<td className="hour" onClick={this.props.setSelectedHour}>16</td>
2053
</tr>
2154

2255
<tr>
23-
<td className="hour">05</td>
56+
<td className="hour" onClick={this.props.setSelectedHour}>17</td>
2457

25-
<td className="hour">06</td>
58+
<td className="hour" onClick={this.props.setSelectedHour}>18</td>
2659

27-
<td className="hour">07</td>
60+
<td className="hour" onClick={this.props.setSelectedHour}>19</td>
2861

29-
<td className="hour">08</td>
62+
<td className="hour" onClick={this.props.setSelectedHour}>20</td>
3063
</tr>
3164

3265
<tr>
33-
<td className="hour">09</td>
66+
<td className="hour" onClick={this.props.setSelectedHour}>21</td>
3467

35-
<td className="hour">10</td>
68+
<td className="hour" onClick={this.props.setSelectedHour}>22</td>
3669

37-
<td className="hour">11</td>
70+
<td className="hour" onClick={this.props.setSelectedHour}>23</td>
3871

39-
<td className="hour">12</td>
72+
<td className="hour" onClick={this.props.setSelectedHour}>24</td>
4073
</tr>
4174
</tbody>
4275
</table>

‎src/coffee/DateTimePickerMinutes.jsx.coffee‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,42 @@
44

55
DateTimePickerMinutes = React.createClass(
66

7+
propTypes:
8+
setSelectedMinute: React.PropTypes.func.isRequired
9+
710
render: ->
811
`(
912
<div className="timepicker-minutes" data-action="selectMinute" style={{display: 'block'}}>
1013
<table className="table-condensed">
1114
<tbody>
1215
<tr>
13-
<td className="minute">00</td>
16+
<td className="minute" onClick={this.props.setSelectedMinute}>00</td>
1417

15-
<td className="minute">05</td>
18+
<td className="minute" onClick={this.props.setSelectedMinute}>05</td>
1619

17-
<td className="minute">10</td>
20+
<td className="minute" onClick={this.props.setSelectedMinute}>10</td>
1821

19-
<td className="minute">15</td>
22+
<td className="minute" onClick={this.props.setSelectedMinute}>15</td>
2023
</tr>
2124

2225
<tr>
23-
<td className="minute">20</td>
26+
<td className="minute" onClick={this.props.setSelectedMinute}>20</td>
2427

25-
<td className="minute">25</td>
28+
<td className="minute" onClick={this.props.setSelectedMinute}>25</td>
2629

27-
<td className="minute">30</td>
30+
<td className="minute" onClick={this.props.setSelectedMinute}>30</td>
2831

29-
<td className="minute">35</td>
32+
<td className="minute" onClick={this.props.setSelectedMinute}>35</td>
3033
</tr>
3134

3235
<tr>
33-
<td className="minute">40</td>
36+
<td className="minute" onClick={this.props.setSelectedMinute}>40</td>
3437

35-
<td className="minute">45</td>
38+
<td className="minute" onClick={this.props.setSelectedMinute}>45</td>
3639

37-
<td className="minute">50</td>
40+
<td className="minute" onClick={this.props.setSelectedMinute}>50</td>
3841

39-
<td className="minute">55</td>
42+
<td className="minute" onClick={this.props.setSelectedMinute}>55</td>
4043
</tr>
4144
</tbody>
4245
</table>

0 commit comments

Comments
 (0)