Merge branch 'tewen-min-date-max-date'

Author: chollier

README.md

@@ -39,6 +39,8 @@ DateTimeField
 | **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). |
 | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') |
 | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |
+| **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |
+| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
 
 Update Warning
 ===============================

examples/basic/basic.jsx

@@ -1,5 +1,6 @@
 var React = require('react/addons');
 var DateTimeField = require('react-bootstrap-datetimepicker');
+var moment = require('moment');
 
 var Basic = React.createClass({
 
@@ -29,23 +30,34 @@ var Basic = React.createClass({
 						</div>
 						<div className="row">
 							<div className="col-xs-12">
-							ViewMode set to years view with custom inputFormat
-							<DateTimeField
-								inputFormat='DD-MM-YYYY'
-								viewMode='years'
-							/>
-							<pre> {'<DateTimeField viewMode="years" inputFormat="DD-MM-YYYY" />'} </pre>
+                ViewMode set to years view with custom inputFormat
+                <DateTimeField
+                  inputFormat='DD-MM-YYYY'
+                  viewMode='years'
+                />
+                <pre> {'<DateTimeField viewMode="years" inputFormat="DD-MM-YYYY" />'} </pre>
 							</div>
 						</div>
 						<div className="row">
 							<div className="col-xs-12">
-							daysOfWeekDisabled
-							<DateTimeField
-								daysOfWeekDisabled={[0,1,2]}
-							/>
-							<pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
-							
+                daysOfWeekDisabled
+                <DateTimeField
+                  daysOfWeekDisabled={[0,1,2]}
+                />
+                <pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
+
+              </div>
 						</div>
+						<div className="row">
+							<div className="col-xs-12">
+                minDate and maxDate
+                <DateTimeField
+                  minDate={moment().subtract(1, 'days')}
+                  maxDate={moment().add(1, 'days')}
+                />
+                <pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
+
+              </div>
 						</div>
 					</div>;
 	}

src/DateTimeField.jsx

@@ -15,7 +15,9 @@ DateTimeField = React.createClass({
     format: React.PropTypes.string,
     inputFormat: React.PropTypes.string,
     inputProps: React.PropTypes.object,
-    defaultText: React.PropTypes.string
+    defaultText: React.PropTypes.string,
+    minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object
   },
   getDefaultProps: function() {
     return {
@@ -71,15 +73,17 @@ DateTimeField = React.createClass({
 
   },
   setSelectedDate: function(e) {
-    return this.setState({
-      selectedDate: this.state.viewDate.clone().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));
+    if (e.target.className && !e.target.className.match(/disabled/g)) {
       return this.setState({
-        inputValue: this.state.selectedDate.format(this.props.inputFormat)
+        selectedDate: this.state.viewDate.clone().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)
+        });
       });
-    });
+    }
   },
   setSelectedHour: function(e) {
     return this.setState({
@@ -280,6 +284,8 @@ DateTimeField = React.createClass({
                   showToday={this.props.showToday}
                   viewMode={this.props.viewMode}
                   daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+                  minDate={this.props.minDate}
+                  maxDate={this.props.maxDate}
                   addDecade={this.addDecade}
                   addYear={this.addYear}
                   addMonth={this.addMonth}

src/DateTimePicker.jsx

@@ -33,7 +33,9 @@ DateTimePicker = React.createClass({
     addMinute: React.PropTypes.func.isRequired,
     addDecade: React.PropTypes.func.isRequired,
     subtractDecade: React.PropTypes.func.isRequired,
-    togglePeriod: React.PropTypes.func.isRequired
+    togglePeriod: React.PropTypes.func.isRequired,
+    minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object
   },
   renderDatePicker: function() {
     if (this.props.showDatePicker) {
@@ -54,6 +56,8 @@ DateTimePicker = React.createClass({
               setViewYear={this.props.setViewYear}
               addDecade={this.props.addDecade}
               subtractDecade={this.props.subtractDecade}
+              minDate={this.props.minDate}
+              maxDate={this.props.maxDate}
         />
       </li>
       );

src/DateTimePickerDate.jsx

@@ -26,7 +26,9 @@ DateTimePickerDate = React.createClass({
     setViewMonth: React.PropTypes.func.isRequired,
     setViewYear: React.PropTypes.func.isRequired,
     addDecade: React.PropTypes.func.isRequired,
-    subtractDecade: React.PropTypes.func.isRequired
+    subtractDecade: React.PropTypes.func.isRequired,
+    minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object
   },
   getInitialState: function() {
     var viewModes = {
@@ -86,6 +88,8 @@ DateTimePickerDate = React.createClass({
             showToday={this.props.showToday}
             daysOfWeekDisabled={this.props.daysOfWeekDisabled}
             showMonths={this.showMonths}
+            minDate={this.props.minDate}
+            maxDate={this.props.maxDate}
       />
       );
     } else {

src/DateTimePickerDays.jsx

@@ -13,21 +13,25 @@ DateTimePickerDays = React.createClass({
     showToday: React.PropTypes.bool,
     daysOfWeekDisabled: React.PropTypes.array,
     setSelectedDate: React.PropTypes.func.isRequired,
-    showMonths: React.PropTypes.func.isRequired
+    showMonths: React.PropTypes.func.isRequired,
+    minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object
   },
   getDefaultProps: function() {
     return {
       showToday: true
     };
   },
   renderDays: function() {
-    var cells, classes, days, html, i, month, nextMonth, prevMonth, row, year, _i, _len, _ref;
+    var cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref;
     year = this.props.viewDate.year();
     month = this.props.viewDate.month();
     prevMonth = this.props.viewDate.clone().subtract(1, "months");
     days = prevMonth.daysInMonth();
     prevMonth.date(days).startOf('week');
     nextMonth = moment(prevMonth).clone().add(42, "d");
+    minDate = this.props.minDate ? this.props.minDate.clone().subtract(1, 'days') : this.props.minDate;
+    maxDate = this.props.maxDate ? this.props.maxDate.clone() : this.props.maxDate;
     html = [];
     cells = [];
     while (prevMonth.isBefore(nextMonth)) {
@@ -51,6 +55,9 @@ DateTimePickerDays = React.createClass({
           classes['today'] = true;
         }
       }
+      if ((minDate && prevMonth.isBefore(minDate)) || (maxDate && prevMonth.isAfter(maxDate))) {
+        classes['disabled'] = true;
+      }
       if (this.props.daysOfWeekDisabled) {
         _ref = this.props.daysOfWeekDisabled;
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {