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

Commit 1523afa

Browse files
chollierchollier
committed
Merge branch 'tewen-min-date-max-date'
2 parents 02b453f + 66cbd41 commit 1523afa

File tree

6 files changed

+59
-24
lines changed

6 files changed

+59
-24
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ DateTimeField
3939
| **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). |
4040
| **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') |
4141
| **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |
42+
| **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |
43+
| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
4244

4345
Update Warning
4446
===============================

‎examples/basic/basic.jsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
var React = require('react/addons');
22
var DateTimeField = require('react-bootstrap-datetimepicker');
3+
var moment = require('moment');
34

45
var Basic = React.createClass({
56

@@ -29,23 +30,34 @@ var Basic = React.createClass({
2930
</div>
3031
<div className="row">
3132
<div className="col-xs-12">
32-
ViewMode set to years view with custom inputFormat
33-
<DateTimeField
34-
inputFormat='DD-MM-YYYY'
35-
viewMode='years'
36-
/>
37-
<pre> {'<DateTimeField viewMode="years" inputFormat="DD-MM-YYYY" />'} </pre>
33+
ViewMode set to years view with custom inputFormat
34+
<DateTimeField
35+
inputFormat='DD-MM-YYYY'
36+
viewMode='years'
37+
/>
38+
<pre> {'<DateTimeField viewMode="years" inputFormat="DD-MM-YYYY" />'} </pre>
3839
</div>
3940
</div>
4041
<div className="row">
4142
<div className="col-xs-12">
42-
daysOfWeekDisabled
43-
<DateTimeField
44-
daysOfWeekDisabled={[0,1,2]}
45-
/>
46-
<pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
47-
43+
daysOfWeekDisabled
44+
<DateTimeField
45+
daysOfWeekDisabled={[0,1,2]}
46+
/>
47+
<pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
48+
49+
</div>
4850
</div>
51+
<div className="row">
52+
<div className="col-xs-12">
53+
minDate and maxDate
54+
<DateTimeField
55+
minDate={moment().subtract(1, 'days')}
56+
maxDate={moment().add(1, 'days')}
57+
/>
58+
<pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
59+
60+
</div>
4961
</div>
5062
</div>;
5163
}

‎src/DateTimeField.jsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ DateTimeField = React.createClass({
1515
format: React.PropTypes.string,
1616
inputFormat: React.PropTypes.string,
1717
inputProps: React.PropTypes.object,
18-
defaultText: React.PropTypes.string
18+
defaultText: React.PropTypes.string,
19+
minDate: React.PropTypes.object,
20+
maxDate: React.PropTypes.object
1921
},
2022
getDefaultProps: function() {
2123
return {
@@ -71,15 +73,17 @@ DateTimeField = React.createClass({
7173

7274
},
7375
setSelectedDate: function(e) {
74-
return this.setState({
75-
selectedDate: this.state.viewDate.clone().date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())
76-
}, function() {
77-
this.closePicker();
78-
this.props.onChange(this.state.selectedDate.format(this.props.format));
76+
if (e.target.className && !e.target.className.match(/disabled/g)) {
7977
return this.setState({
80-
inputValue: this.state.selectedDate.format(this.props.inputFormat)
78+
selectedDate: this.state.viewDate.clone().date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())
79+
}, function () {
80+
this.closePicker();
81+
this.props.onChange(this.state.selectedDate.format(this.props.format));
82+
return this.setState({
83+
inputValue: this.state.selectedDate.format(this.props.inputFormat)
84+
});
8185
});
82-
});
86+
}
8387
},
8488
setSelectedHour: function(e) {
8589
return this.setState({
@@ -280,6 +284,8 @@ DateTimeField = React.createClass({
280284
showToday={this.props.showToday}
281285
viewMode={this.props.viewMode}
282286
daysOfWeekDisabled={this.props.daysOfWeekDisabled}
287+
minDate={this.props.minDate}
288+
maxDate={this.props.maxDate}
283289
addDecade={this.addDecade}
284290
addYear={this.addYear}
285291
addMonth={this.addMonth}

‎src/DateTimePicker.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ DateTimePicker = React.createClass({
3333
addMinute: React.PropTypes.func.isRequired,
3434
addDecade: React.PropTypes.func.isRequired,
3535
subtractDecade: React.PropTypes.func.isRequired,
36-
togglePeriod: React.PropTypes.func.isRequired
36+
togglePeriod: React.PropTypes.func.isRequired,
37+
minDate: React.PropTypes.object,
38+
maxDate: React.PropTypes.object
3739
},
3840
renderDatePicker: function() {
3941
if (this.props.showDatePicker) {
@@ -54,6 +56,8 @@ DateTimePicker = React.createClass({
5456
setViewYear={this.props.setViewYear}
5557
addDecade={this.props.addDecade}
5658
subtractDecade={this.props.subtractDecade}
59+
minDate={this.props.minDate}
60+
maxDate={this.props.maxDate}
5761
/>
5862
</li>
5963
);

‎src/DateTimePickerDate.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ DateTimePickerDate = React.createClass({
2626
setViewMonth: React.PropTypes.func.isRequired,
2727
setViewYear: React.PropTypes.func.isRequired,
2828
addDecade: React.PropTypes.func.isRequired,
29-
subtractDecade: React.PropTypes.func.isRequired
29+
subtractDecade: React.PropTypes.func.isRequired,
30+
minDate: React.PropTypes.object,
31+
maxDate: React.PropTypes.object
3032
},
3133
getInitialState: function() {
3234
var viewModes = {
@@ -86,6 +88,8 @@ DateTimePickerDate = React.createClass({
8688
showToday={this.props.showToday}
8789
daysOfWeekDisabled={this.props.daysOfWeekDisabled}
8890
showMonths={this.showMonths}
91+
minDate={this.props.minDate}
92+
maxDate={this.props.maxDate}
8993
/>
9094
);
9195
} else {

‎src/DateTimePickerDays.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,25 @@ DateTimePickerDays = React.createClass({
1313
showToday: React.PropTypes.bool,
1414
daysOfWeekDisabled: React.PropTypes.array,
1515
setSelectedDate: React.PropTypes.func.isRequired,
16-
showMonths: React.PropTypes.func.isRequired
16+
showMonths: React.PropTypes.func.isRequired,
17+
minDate: React.PropTypes.object,
18+
maxDate: React.PropTypes.object
1719
},
1820
getDefaultProps: function() {
1921
return {
2022
showToday: true
2123
};
2224
},
2325
renderDays: function() {
24-
var cells, classes, days, html, i, month, nextMonth, prevMonth, row, year, _i, _len, _ref;
26+
var cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref;
2527
year = this.props.viewDate.year();
2628
month = this.props.viewDate.month();
2729
prevMonth = this.props.viewDate.clone().subtract(1, "months");
2830
days = prevMonth.daysInMonth();
2931
prevMonth.date(days).startOf('week');
3032
nextMonth = moment(prevMonth).clone().add(42, "d");
33+
minDate = this.props.minDate ? this.props.minDate.clone().subtract(1, 'days') : this.props.minDate;
34+
maxDate = this.props.maxDate ? this.props.maxDate.clone() : this.props.maxDate;
3135
html = [];
3236
cells = [];
3337
while (prevMonth.isBefore(nextMonth)) {
@@ -51,6 +55,9 @@ DateTimePickerDays = React.createClass({
5155
classes['today'] = true;
5256
}
5357
}
58+
if ((minDate && prevMonth.isBefore(minDate)) || (maxDate && prevMonth.isAfter(maxDate))) {
59+
classes['disabled'] = true;
60+
}
5461
if (this.props.daysOfWeekDisabled) {
5562
_ref = this.props.daysOfWeekDisabled;
5663
for (_i = 0, _len = _ref.length; _i < _len; _i++) {

0 commit comments

Comments
 (0)