Merge pull request quri#3 from richard-lopes/master

Support for minDate and maxDate for months and years calendar.

Author: camjackson

examples/basic/basic.js

@@ -133,6 +133,28 @@ class Basic extends Component {
                 <pre> {'<DateTimeField mode="month" />'} </pre>
               </div>
             </div>
+            <div className="row">
+              <div className="col-xs-12">
+                Month picker with min and max dates
+                <DateTimeField
+                  mode="month"
+                  maxDate={moment().add(3, "months")}
+                  minDate={moment().subtract(3, "months")}
+                />
+                <pre> {'<DateTimeField mode="month" maxDate={moment().add(3, "months")} minDate={moment().subtract(3, "months")/>'} </pre>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col-xs-12">
+                ViewMode set to years with min and max dates
+                <DateTimeField
+                  maxDate={moment().add(1, "year")}
+                  minDate={moment().subtract(1, "year")}
+                  viewMode='years'
+                />
+                <pre> {'<DateTimeField viewMode="years" maxDate={moment().add(1, "year")} minDate={moment().subtract(1, "year")}/>'} </pre>
+              </div>
+            </div>
           </div>
       );
    }

src/DateTimeField.js

@@ -307,7 +307,6 @@ export default class DateTimeField extends Component {
     }, function() {
       this.closePicker();
       this.props.onChange(today);
-      console.log(this.state.selectedDate)
       return this.setState({
         inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat())
       });

src/DateTimePickerDate.js

@@ -124,6 +124,8 @@ export default class DateTimePickerDate extends Component {
       return (
       <DateTimePickerMonths
             addYear={this.props.addYear}
+            maxDate={this.props.maxDate}
+            minDate={this.props.minDate}
             selectedDate={this.props.selectedDate}
             setSelectedMonth={this.props.setSelectedMonth}
             setViewMonth={this.setViewMonth}
@@ -143,6 +145,8 @@ export default class DateTimePickerDate extends Component {
       return (
       <DateTimePickerYears
             addDecade={this.props.addDecade}
+            maxDate={this.props.maxDate}
+            minDate={this.props.minDate}
             selectedDate={this.props.selectedDate}
             setViewYear={this.setViewYear}
             subtractDecade={this.props.subtractDecade}

src/DateTimePickerMonths.js

@@ -12,23 +12,28 @@ export default class DateTimePickerMonths extends Component {
     showYears: PropTypes.func.isRequired,
     setViewMonth: PropTypes.func.isRequired,
     setSelectedMonth: PropTypes.func.isRequired,
+    minDate: PropTypes.object,
+    maxDate: PropTypes.object,
     mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_MONTH, Constants.MODE_DATETIME])
   }
 
   renderMonths = () => {
-    var classes, i, month, months, monthsShort;
+    var classes, month, months, monthsShort, minDate, maxDate, currentMonth;
     const onClick = this.props.mode === Constants.MODE_MONTH ? this.props.setSelectedMonth : this.props.setViewMonth;
     month = this.props.selectedDate.month();
     monthsShort = moment.monthsShort();
-    i = 0;
+    minDate = this.props.minDate ? this.props.minDate.clone().subtract(1, "months")  : this.props.minDate;
+    maxDate = this.props.maxDate ? this.props.maxDate.clone() : this.props.maxDate;
     months = [];
-    while (i < 12) {
+    currentMonth = moment([this.props.viewDate.year(), 0, 1]);
+    for (let i = 0; i < 12; i++) {
       classes = {
         month: true,
-        "active": i === month && this.props.viewDate.year() === this.props.selectedDate.year()
+        "active": i === month && this.props.viewDate.year() === this.props.selectedDate.year(),
+        disabled: (minDate && currentMonth.isBefore(minDate)) || (maxDate && currentMonth.isAfter(maxDate))
       };
       months.push(<span className={classnames(classes)} key={i} onClick={onClick}>{monthsShort[i]}</span>);
-      i++;
+      currentMonth.add(1, "months");
     }
     return months;
   }

src/DateTimePickerYears.js

@@ -7,24 +7,27 @@ export default class DateTimePickerYears extends Component {
     addDecade: PropTypes.func.isRequired,
     viewDate: PropTypes.object.isRequired,
     selectedDate: PropTypes.object.isRequired,
-    setViewYear: PropTypes.func.isRequired
+    setViewYear: PropTypes.func.isRequired,
+    minDate: PropTypes.object,
+    maxDate: PropTypes.object
   }
 
   renderYears = () => {
-    var classes, i, year, years;
+    var classes, year, years, minDate, maxDate;
+    minDate = this.props.minDate ? this.props.minDate.clone() : this.props.minDate;
+    maxDate = this.props.maxDate ? this.props.maxDate.clone() : this.props.maxDate;
     years = [];
     year = parseInt(this.props.viewDate.year() / 10, 10) * 10;
     year--;
-    i = -1;
-    while (i < 11) {
+    for (let i = -1; i < 11; i++) {
       classes = {
         year: true,
         old: i === -1 | i === 10,
-        active: this.props.selectedDate.year() === year
+        active: this.props.selectedDate.year() === year,
+        disabled: (minDate && year < minDate.year()) || (maxDate && year > maxDate.year())
       };
-      years.push(<span className={classnames(classes)} key={year}onClick={this.props.setViewYear}>{year}</span>);
+      years.push(<span className={classnames(classes)} key={year} onClick={this.props.setViewYear}>{year}</span>);
       year++;
-      i++;
     }
     return years;
   }

src/__tests__/DateTimePickerMonths-test.js

@@ -23,6 +23,8 @@ describe("DateTimePickerMonths", function() {
         showYears={showYearsMock}
         subtractYear={subtractYearMock}
         viewDate={moment()}
+        minDate={moment().subtract(1, "months")}
+        maxDate={moment().add(1, "months")}
         setSelectedMonth={setSelectedMonthMock}
         mode={"date"}
        />
@@ -108,6 +110,19 @@ describe("DateTimePickerMonths", function() {
       const active = TestUtils.scryRenderedDOMComponentsWithClass(months, "active");
       expect(active.length).toBe(0);
     });
-  });
 
+    it("disable months outside the minDate / maxDate range", function() {
+      const active = TestUtils.findRenderedDOMComponentWithClass(months, "active");
+      const monthList = TestUtils.scryRenderedDOMComponentsWithClass(months, "month");
+      const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+      const currentMonth = labels.indexOf(active.textContent);
+      let month;
+
+      monthList.forEach(item => {
+        month = labels.indexOf(item.textContent);
+        if (month < currentMonth -1 || month > currentMonth + 1) expect(item.className).toMatch(/disabled/);
+        else expect(item.className).not.toMatch(/disabled/);
+      });
+    });
+  });
 });

src/__tests__/DateTimePickerYears-test.js

@@ -1,8 +1,8 @@
 import React from "react";
 import TestUtils from "react-addons-test-utils";
 
-jest.dontMock("../DateTimePickerYears.js");
 jest.dontMock("moment");
+jest.dontMock("../DateTimePickerYears.js");
 
 describe("DateTimePickerYears", function() {
   const moment = require("moment");
@@ -19,6 +19,8 @@ describe("DateTimePickerYears", function() {
         selectedDate={moment()}
         setViewYear={setViewYearMock}
         subtractDecade={subtractDecadeMock}
+        minDate={moment().subtract(1, "years")}
+        maxDate={moment().add(1, "years")}
         viewDate={moment()}
        />
     );
@@ -80,6 +82,18 @@ describe("DateTimePickerYears", function() {
       const active = TestUtils.scryRenderedDOMComponentsWithClass(years, "active");
       expect(active.length).toBe(0);
     });
-  });
 
+    it("disable years outside the minDate / maxDate range", function() {
+      const active = TestUtils.findRenderedDOMComponentWithClass(years, "active");
+      const yearList = TestUtils.scryRenderedDOMComponentsWithClass(years, "year");
+      const currentYear = +active.textContent;
+      let year;
+
+      yearList.forEach(item => {
+        year = +item.textContent;
+        if (year < currentYear -1 || year > currentYear + 1) expect(item.className).toMatch(/disabled/);
+        else expect(item.className).not.toMatch(/disabled/);
+      });
+    });
+  });
 });