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

Commit dc0f12a

Browse files
chollierchollier
committed
Merge pull request #50 from quri/alex1712-master
Alex1712 master
2 parents b4ea2f0 + 802bee8 commit dc0f12a

File tree

9 files changed

+131
-39
lines changed

9 files changed

+131
-39
lines changed

‎examples/basic/basic.jsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,26 @@ var Basic = React.createClass({
5959

6060
</div>
6161
</div>
62+
<div className="row">
63+
<div className="col-xs-12">
64+
just time picker
65+
<DateTimeField
66+
mode="time"
67+
/>
68+
<pre> {'<DateTimeField mode="time" />'} </pre>
69+
</div>
70+
</div>
71+
<div className="row">
72+
<div className="col-xs-12">
73+
just date picker
74+
<DateTimeField
75+
mode="date"
76+
/>
77+
<pre> {'<DateTimeField mode="date" />'} </pre>
78+
</div>
79+
</div>
6280
</div>;
63-
}
81+
}
6482

6583
});
6684

‎src/Constants.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
MODE_DATE: 'date',
3+
MODE_DATETIME: 'datetime',
4+
MODE_TIME: 'time'
5+
};

‎src/DateTimeField.jsx‎

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,39 @@ moment = require('moment');
88

99
Glyphicon = require('react-bootstrap').Glyphicon;
1010

11+
Constants = require('./Constants');
12+
1113
DateTimeField = React.createClass({
1214
propTypes: {
1315
dateTime: React.PropTypes.string,
1416
onChange: React.PropTypes.func,
1517
format: React.PropTypes.string,
16-
inputFormat: React.PropTypes.string,
1718
inputProps: React.PropTypes.object,
19+
inputFormat: React.PropTypes.string,
1820
defaultText: React.PropTypes.string,
21+
mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]),
1922
minDate: React.PropTypes.object,
2023
maxDate: React.PropTypes.object
2124
},
2225
getDefaultProps: function() {
2326
return {
2427
dateTime: moment().format('x'),
2528
format: 'x',
26-
inputFormat: "MM/DD/YY h:mm A",
2729
showToday: true,
2830
viewMode: 'days',
2931
daysOfWeekDisabled: [],
32+
mode: Constants.MODE_DATETIME,
3033
onChange: function (x) {
3134
console.log(x);
3235
}
3336
};
3437
},
3538
getInitialState: function() {
3639
return {
37-
showDatePicker: true,
38-
showTimePicker: false,
40+
showDatePicker: this.props.mode !== Constants.MODE_TIME,
41+
showTimePicker: this.props.mode === Constants.MODE_TIME,
42+
inputFormat: this.resolvePropsInputFormat(),
43+
buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "calendar",
3944
widgetStyle: {
4045
display: 'block',
4146
position: 'absolute',
@@ -44,7 +49,7 @@ DateTimeField = React.createClass({
4449
},
4550
viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"),
4651
selectedDate: moment(this.props.dateTime, this.props.format, true),
47-
inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.props.inputFormat)
52+
inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat())
4853
};
4954
},
5055
componentWillReceiveProps: function(nextProps) {
@@ -55,32 +60,53 @@ DateTimeField = React.createClass({
5560
inputValue: moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat)
5661
});
5762
}
63+
if (nextProps.inputFormat !== this.props.inputFormat) {
64+
return this.setState({
65+
inputFormat: nextProps.inputFormat
66+
});
67+
}
68+
},
69+
resolvePropsInputFormat: function() {
70+
if(this.props.inputFormat) return this.props.inputFormat;
71+
switch(this.props.mode) {
72+
case Constants.MODE_TIME:
73+
return "h:mm A";
74+
case Constants.MODE_DATE:
75+
return "MM/DD/YY";
76+
default:
77+
return "MM/DD/YY h:mm A";
78+
}
5879
},
5980
onChange: function(event) {
6081
var value = event.target == null ? event : event.target.value;
61-
if (moment(value, this.props.inputFormat, true).isValid()) {
82+
if (moment(value, this.state.inputFormat, true).isValid()) {
6283
this.setState({
63-
selectedDate: moment(value, this.props.inputFormat, true),
64-
viewDate: moment(value, this.props.inputFormat, true).startOf("month")
84+
selectedDate: moment(value, this.state.inputFormat, true),
85+
viewDate: moment(value, this.state.inputFormat, true).startOf("month")
6586
});
6687
}
6788

6889
return this.setState({
6990
inputValue: value
7091
}, function() {
71-
return this.props.onChange(moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format));
92+
return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format));
7293
});
7394

7495
},
7596
setSelectedDate: function(e) {
76-
if (e.target.className && !e.target.className.match(/disabled/g)) {
97+
var target = e.target;
98+
if (target.className && !target.className.match(/disabled/g)) {
99+
var month;
100+
if(target.className.includes("new")) month = this.state.viewDate.month() + 1;
101+
else if(target.className.includes("old")) month = this.state.viewDate.month() - 1;
102+
else month = this.state.viewDate.month();
77103
return this.setState({
78-
selectedDate: this.state.viewDate.clone().date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())
79-
}, function () {
104+
selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())
105+
}, function() {
80106
this.closePicker();
81107
this.props.onChange(this.state.selectedDate.format(this.props.format));
82108
return this.setState({
83-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
109+
inputValue: this.state.selectedDate.format(this.state.inputFormat)
84110
});
85111
});
86112
}
@@ -92,7 +118,7 @@ DateTimeField = React.createClass({
92118
this.closePicker();
93119
this.props.onChange(this.state.selectedDate.format(this.props.format));
94120
return this.setState({
95-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
121+
inputValue: this.state.selectedDate.format(this.state.inputFormat)
96122
});
97123
});
98124
},
@@ -103,7 +129,7 @@ DateTimeField = React.createClass({
103129
this.closePicker();
104130
this.props.onChange(this.state.selectedDate.format(this.props.format));
105131
return this.setState({
106-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
132+
inputValue: this.state.selectedDate.format(this.state.inputFormat)
107133
});
108134
});
109135
},
@@ -123,7 +149,7 @@ DateTimeField = React.createClass({
123149
}, function() {
124150
this.props.onChange(this.state.selectedDate.format(this.props.format));
125151
return this.setState({
126-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
152+
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
127153
});
128154
});
129155
},
@@ -133,7 +159,7 @@ DateTimeField = React.createClass({
133159
}, function() {
134160
this.props.onChange(this.state.selectedDate.format(this.props.format));
135161
return this.setState({
136-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
162+
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
137163
});
138164
});
139165
},
@@ -158,7 +184,7 @@ DateTimeField = React.createClass({
158184
}, function() {
159185
this.props.onChange(this.state.selectedDate.format(this.props.format));
160186
return this.setState({
161-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
187+
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
162188
});
163189
});
164190
},
@@ -168,7 +194,7 @@ DateTimeField = React.createClass({
168194
}, function() {
169195
this.props.onChange(this.state.selectedDate.format(this.props.format));
170196
return this.setState({
171-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
197+
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
172198
});
173199
});
174200
},
@@ -189,9 +215,9 @@ DateTimeField = React.createClass({
189215
},
190216
togglePeriod: function() {
191217
if (this.state.selectedDate.hour() > 12) {
192-
return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.props.inputFormat));
218+
return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.state.inputFormat));
193219
} else {
194-
return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.props.inputFormat));
220+
return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.state.inputFormat));
195221
}
196222
},
197223
togglePicker: function() {
@@ -284,6 +310,7 @@ DateTimeField = React.createClass({
284310
showToday={this.props.showToday}
285311
viewMode={this.props.viewMode}
286312
daysOfWeekDisabled={this.props.daysOfWeekDisabled}
313+
mode={this.props.mode}
287314
minDate={this.props.minDate}
288315
maxDate={this.props.maxDate}
289316
addDecade={this.addDecade}
@@ -306,7 +333,7 @@ DateTimeField = React.createClass({
306333
/>
307334
<div className="input-group date" ref="datetimepicker">
308335
<input type="text" className="form-control" onChange={this.onChange} value={this.state.inputValue} {...this.props.inputProps}/>
309-
<span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph="calendar" /></span>
336+
<span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph={this.state.buttonIcon} /></span>
310337
</div>
311338
</div>
312339
);

‎src/DateTimePicker.jsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ DateTimePickerTime = require('./DateTimePickerTime');
88

99
Glyphicon = require('react-bootstrap').Glyphicon;
1010

11+
Constants = require('./Constants');
12+
1113
DateTimePicker = React.createClass({
1214
propTypes: {
1315
showDatePicker: React.PropTypes.bool,
@@ -21,6 +23,7 @@ DateTimePicker = React.createClass({
2123
React.PropTypes.string,
2224
React.PropTypes.number
2325
]),
26+
mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]),
2427
daysOfWeekDisabled: React.PropTypes.array,
2528
setSelectedDate: React.PropTypes.func.isRequired,
2629
subtractYear: React.PropTypes.func.isRequired,
@@ -77,11 +80,21 @@ DateTimePicker = React.createClass({
7780
addMinute={this.props.addMinute}
7881
subtractMinute={this.props.subtractMinute}
7982
togglePeriod={this.props.togglePeriod}
83+
mode={this.props.mode}
8084
/>
8185
</li>
8286
);
8387
}
8488
},
89+
renderSwitchButton: function() {
90+
return this.props.mode === Constants.MODE_DATETIME ?
91+
(
92+
<li>
93+
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Glyphicon glyph={this.props.showTimePicker ? 'calendar' : 'time'} /></span>
94+
</li>
95+
) :
96+
null;
97+
},
8598
render: function() {
8699
return (
87100
<div className={React.addons.classSet(this.props.widgetClasses)} style={this.props.widgetStyle}>
@@ -90,9 +103,7 @@ DateTimePicker = React.createClass({
90103

91104
{this.renderDatePicker()}
92105

93-
<li>
94-
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Glyphicon glyph={this.props.showTimePicker ? 'calendar' : 'time'} /></span>
95-
</li>
106+
{this.renderSwitchButton()}
96107

97108
{this.renderTimePicker()}
98109

‎src/DateTimePickerHours.jsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
11
var DateTimePickerHours, React;
22

33
React = require('react');
4+
Glyphicon = require('react-bootstrap').Glyphicon;
45

56
DateTimePickerHours = React.createClass({
67
propTypes: {
7-
setSelectedHour: React.PropTypes.func.isRequired
8+
setSelectedHour: React.PropTypes.func.isRequired,
9+
onSwitch: React.PropTypes.func.isRequired
10+
},
11+
renderSwitchButton: function() {
12+
return this.props.mode === Constants.MODE_TIME ?
13+
(
14+
<ul className="list-unstyled">
15+
<li>
16+
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.onSwitch}><Glyphicon glyph="time" /></span>
17+
</li>
18+
</ul>
19+
) :
20+
null;
821
},
922
render: function() {
1023
return (
1124
<div className="timepicker-hours" data-action="selectHour" style={{display: 'block'}}>
25+
{this.renderSwitchButton()}
1226
<table className="table-condensed">
1327
<tbody>
1428
<tr>

‎src/DateTimePickerMinutes.jsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
11
var DateTimePickerMinutes, React;
22

33
React = require('react');
4+
Glyphicon = require('react-bootstrap').Glyphicon;
45

56
DateTimePickerMinutes = React.createClass({
67
propTypes: {
7-
setSelectedMinute: React.PropTypes.func.isRequired
8+
setSelectedMinute: React.PropTypes.func.isRequired,
9+
onSwitch: React.PropTypes.func.isRequired
10+
},
11+
renderSwitchButton: function() {
12+
return this.props.mode === Constants.MODE_TIME ?
13+
(
14+
<ul className="list-unstyled">
15+
<li>
16+
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.onSwitch}><Glyphicon glyph="time" /></span>
17+
</li>
18+
</ul>
19+
) :
20+
null;
821
},
922
render: function() {
1023
return (
1124
<div className="timepicker-minutes" data-action="selectMinute" style={{display: 'block'}}>
25+
{this.renderSwitchButton()}
1226
<table className="table-condensed">
1327
<tbody>
1428
<tr>

‎src/DateTimePickerMonths.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ DateTimePickerMonths = React.createClass({
2424
month: true,
2525
'active': i === month && this.props.viewDate.year() === this.props.selectedDate.year()
2626
};
27-
months.push(<span className={React.addons.classSet(classes)} onClick={this.props.setViewMonth}>{monthsShort[i]}</span>);
27+
months.push(<span key={i} className={React.addons.classSet(classes)} onClick={this.props.setViewMonth}>{monthsShort[i]}</span>);
2828
i++;
2929
}
3030
return months;

0 commit comments

Comments
 (0)