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

Commit

Permalink
Merge pull request #50 from quri/alex1712-master
Browse files Browse the repository at this point in the history 
Alex1712 master
  • Loading branch information
@chollier
chollier committed May 23, 2015
2 parents b4ea2f0 + 802bee8 commit dc0f12a
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 39 deletions.
20 changes: 19 additions & 1 deletion examples/basic/basic.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,26 @@ var Basic = React.createClass({

</div>
</div>
<div className="row">
<div className="col-xs-12">
just time picker
<DateTimeField
mode="time"
/>
<pre> {'<DateTimeField mode="time" />'} </pre>
</div>
</div>
<div className="row">
<div className="col-xs-12">
just date picker
<DateTimeField
mode="date"
/>
<pre> {'<DateTimeField mode="date" />'} </pre>
</div>
</div>
</div>;
}
}

});

Expand Down
5 changes: 5 additions & 0 deletions src/Constants.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
MODE_DATE: 'date',
MODE_DATETIME: 'datetime',
MODE_TIME: 'time'
};
71 changes: 49 additions & 22 deletions src/DateTimeField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,39 @@ moment = require('moment');

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

Constants = require('./Constants');

DateTimeField = React.createClass({
propTypes: {
dateTime: React.PropTypes.string,
onChange: React.PropTypes.func,
format: React.PropTypes.string,
inputFormat: React.PropTypes.string,
inputProps: React.PropTypes.object,
inputFormat: React.PropTypes.string,
defaultText: React.PropTypes.string,
mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]),
minDate: React.PropTypes.object,
maxDate: React.PropTypes.object
},
getDefaultProps: function() {
return {
dateTime: moment().format('x'),
format: 'x',
inputFormat: "MM/DD/YY h:mm A",
showToday: true,
viewMode: 'days',
daysOfWeekDisabled: [],
mode: Constants.MODE_DATETIME,
onChange: function (x) {
console.log(x);
}
};
},
getInitialState: function() {
return {
showDatePicker: true,
showTimePicker: false,
showDatePicker: this.props.mode !== Constants.MODE_TIME,
showTimePicker: this.props.mode === Constants.MODE_TIME,
inputFormat: this.resolvePropsInputFormat(),
buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "calendar",
widgetStyle: {
display: 'block',
position: 'absolute',
Expand All @@ -44,7 +49,7 @@ DateTimeField = React.createClass({
},
viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"),
selectedDate: moment(this.props.dateTime, this.props.format, true),
inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.props.inputFormat)
inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat())
};
},
componentWillReceiveProps: function(nextProps) {
Expand All @@ -55,32 +60,53 @@ DateTimeField = React.createClass({
inputValue: moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat)
});
}
if (nextProps.inputFormat !== this.props.inputFormat) {
return this.setState({
inputFormat: nextProps.inputFormat
});
}
},
resolvePropsInputFormat: function() {
if(this.props.inputFormat) return this.props.inputFormat;
switch(this.props.mode) {
case Constants.MODE_TIME:
return "h:mm A";
case Constants.MODE_DATE:
return "MM/DD/YY";
default:
return "MM/DD/YY h:mm A";
}
},
onChange: function(event) {
var value = event.target == null ? event : event.target.value;
if (moment(value, this.props.inputFormat, true).isValid()) {
if (moment(value, this.state.inputFormat, true).isValid()) {
this.setState({
selectedDate: moment(value, this.props.inputFormat, true),
viewDate: moment(value, this.props.inputFormat, true).startOf("month")
selectedDate: moment(value, this.state.inputFormat, true),
viewDate: moment(value, this.state.inputFormat, true).startOf("month")
});
}

return this.setState({
inputValue: value
}, function() {
return this.props.onChange(moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format));
return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format));
});

},
setSelectedDate: function(e) {
if (e.target.className && !e.target.className.match(/disabled/g)) {
var target = e.target;
if (target.className && !target.className.match(/disabled/g)) {
var month;
if(target.className.includes("new")) month = this.state.viewDate.month() + 1;
else if(target.className.includes("old")) month = this.state.viewDate.month() - 1;
else month = this.state.viewDate.month();
return this.setState({
selectedDate: this.state.viewDate.clone().date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())
}, function () {
selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())
}, function() {
this.closePicker();
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.state.inputFormat)
});
});
}
Expand All @@ -92,7 +118,7 @@ DateTimeField = React.createClass({
this.closePicker();
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.state.inputFormat)
});
});
},
Expand All @@ -103,7 +129,7 @@ DateTimeField = React.createClass({
this.closePicker();
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.state.inputFormat)
});
});
},
Expand All @@ -123,7 +149,7 @@ DateTimeField = React.createClass({
}, function() {
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
});
});
},
Expand All @@ -133,7 +159,7 @@ DateTimeField = React.createClass({
}, function() {
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
});
});
},
Expand All @@ -158,7 +184,7 @@ DateTimeField = React.createClass({
}, function() {
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
});
});
},
Expand All @@ -168,7 +194,7 @@ DateTimeField = React.createClass({
}, function() {
this.props.onChange(this.state.selectedDate.format(this.props.format));
return this.setState({
inputValue: this.state.selectedDate.format(this.props.inputFormat)
inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
});
});
},
Expand All @@ -189,9 +215,9 @@ DateTimeField = React.createClass({
},
togglePeriod: function() {
if (this.state.selectedDate.hour() > 12) {
return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.props.inputFormat));
return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.state.inputFormat));
} else {
return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.props.inputFormat));
return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.state.inputFormat));
}
},
togglePicker: function() {
Expand Down Expand Up @@ -284,6 +310,7 @@ DateTimeField = React.createClass({
showToday={this.props.showToday}
viewMode={this.props.viewMode}
daysOfWeekDisabled={this.props.daysOfWeekDisabled}
mode={this.props.mode}
minDate={this.props.minDate}
maxDate={this.props.maxDate}
addDecade={this.addDecade}
Expand All @@ -306,7 +333,7 @@ DateTimeField = React.createClass({
/>
<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="calendar" /></span>
<span className="input-group-addon" onClick={this.onClick} onBlur={this.onBlur} ref="dtpbutton"><Glyphicon glyph={this.state.buttonIcon} /></span>
</div>
</div>
);
Expand Down
17 changes: 14 additions & 3 deletions src/DateTimePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ DateTimePickerTime = require('./DateTimePickerTime');

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

Constants = require('./Constants');

DateTimePicker = React.createClass({
propTypes: {
showDatePicker: React.PropTypes.bool,
Expand All @@ -21,6 +23,7 @@ DateTimePicker = React.createClass({
React.PropTypes.string,
React.PropTypes.number
]),
mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]),
daysOfWeekDisabled: React.PropTypes.array,
setSelectedDate: React.PropTypes.func.isRequired,
subtractYear: React.PropTypes.func.isRequired,
Expand Down Expand Up @@ -77,11 +80,21 @@ DateTimePicker = React.createClass({
addMinute={this.props.addMinute}
subtractMinute={this.props.subtractMinute}
togglePeriod={this.props.togglePeriod}
mode={this.props.mode}
/>
</li>
);
}
},
renderSwitchButton: function() {
return this.props.mode === Constants.MODE_DATETIME ?
(
<li>
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.togglePicker}><Glyphicon glyph={this.props.showTimePicker ? 'calendar' : 'time'} /></span>
</li>
) :
null;
},
render: function() {
return (
<div className={React.addons.classSet(this.props.widgetClasses)} style={this.props.widgetStyle}>
Expand All @@ -90,9 +103,7 @@ DateTimePicker = React.createClass({

{this.renderDatePicker()}

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

{this.renderTimePicker()}

Expand Down
16 changes: 15 additions & 1 deletion src/DateTimePickerHours.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
var DateTimePickerHours, React;

React = require('react');
Glyphicon = require('react-bootstrap').Glyphicon;

DateTimePickerHours = React.createClass({
propTypes: {
setSelectedHour: React.PropTypes.func.isRequired
setSelectedHour: React.PropTypes.func.isRequired,
onSwitch: React.PropTypes.func.isRequired
},
renderSwitchButton: function() {
return this.props.mode === Constants.MODE_TIME ?
(
<ul className="list-unstyled">
<li>
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.onSwitch}><Glyphicon glyph="time" /></span>
</li>
</ul>
) :
null;
},
render: function() {
return (
<div className="timepicker-hours" data-action="selectHour" style={{display: 'block'}}>
{this.renderSwitchButton()}
<table className="table-condensed">
<tbody>
<tr>
Expand Down
16 changes: 15 additions & 1 deletion src/DateTimePickerMinutes.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
var DateTimePickerMinutes, React;

React = require('react');
Glyphicon = require('react-bootstrap').Glyphicon;

DateTimePickerMinutes = React.createClass({
propTypes: {
setSelectedMinute: React.PropTypes.func.isRequired
setSelectedMinute: React.PropTypes.func.isRequired,
onSwitch: React.PropTypes.func.isRequired
},
renderSwitchButton: function() {
return this.props.mode === Constants.MODE_TIME ?
(
<ul className="list-unstyled">
<li>
<span className="btn picker-switch" style={{width:'100%'}} onClick={this.props.onSwitch}><Glyphicon glyph="time" /></span>
</li>
</ul>
) :
null;
},
render: function() {
return (
<div className="timepicker-minutes" data-action="selectMinute" style={{display: 'block'}}>
{this.renderSwitchButton()}
<table className="table-condensed">
<tbody>
<tr>
Expand Down
2 changes: 1 addition & 1 deletion src/DateTimePickerMonths.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ DateTimePickerMonths = React.createClass({
month: true,
'active': i === month && this.props.viewDate.year() === this.props.selectedDate.year()
};
months.push(<span className={React.addons.classSet(classes)} onClick={this.props.setViewMonth}>{monthsShort[i]}</span>);
months.push(<span key={i} className={React.addons.classSet(classes)} onClick={this.props.setViewMonth}>{monthsShort[i]}</span>);
i++;
}
return months;
Expand Down
Loading

0 comments on commit dc0f12a

Please sign in to comment.