Support for minimum and maximum dates

README.md

@@ -29,6 +29,8 @@ http://wangzuo.github.io/input-moment
   hourStep={1} // default
   prevMonthIcon="ion-ios-arrow-left" // default
   nextMonthIcon="ion-ios-arrow-right" // default
+  minDate={this.state.minDate} // optional
+  maxDate={this.state.maxDate} // optional
 />
 ```
 Check [app.js](https://github.com/wangzuo/input-moment/blob/master/example/app.js) for a working example.

__tests__/__snapshots__/input-moment.js.snap

@@ -33,6 +33,7 @@ exports[`render 1`] = `
       >
         <button
           className="prev-month"
+          disabled={false}
           onClick={[Function]}
           type="button"
         >
@@ -47,6 +48,7 @@ exports[`render 1`] = `
         </span>
         <button
           className="next-month"
+          disabled={false}
           onClick={[Function]}
           type="button"
         >

example/app.js

@@ -8,7 +8,9 @@ import packageJson from '../package.json';
 
 class App extends Component {
   state = {
-    m: moment()
+    m: moment(),
+    minDate: moment(),
+    maxDate: moment().add(1, 'month')
   };
 
   handleChange = m => {
@@ -35,6 +37,8 @@ class App extends Component {
             onChange={this.handleChange}
             minStep={5}
             onSave={this.handleSave}
+            minDate={this.state.minDate}
+            maxDate={this.state.maxDate}
           />
         </form>
       </div>

src/calendar.js

@@ -4,45 +4,150 @@ import cx from 'classnames';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 
-const Day = ({ i, w, d, className, ...props }) => {
+const isDisabledDay = (currentMoment, minDate, maxDate) => currentMoment.isBefore(minDate, 'day') || currentMoment.isAfter(maxDate, 'day');
+
+const Day = ({ i, w, d, minDate, maxDate, currentMoment, className, ...props }) => {
   const prevMonth = w === 0 && i > 7;
   const nextMonth = w >= 4 && i <= 14;
+  const currentMomentCopy = moment(currentMoment); // Moment clone.
+
+  if (prevMonth) {
+    currentMomentCopy.subtract(1, 'month');
+  }
+
+  if (nextMonth) {
+    currentMomentCopy.add(1, 'month');
+  }
+
+  currentMomentCopy.date(i); 
+
   const cls = cx({
     'prev-month': prevMonth,
     'next-month': nextMonth,
-    'current-day': !prevMonth && !nextMonth && i === d
+    'current-day': !prevMonth && !nextMonth && i === d,
+    'disabled-day': minDate || maxDate ? isDisabledDay(currentMomentCopy, minDate, maxDate) : false
   });
 
-  return <td className={cls} {...props}>{i}</td>;
+  if (isDisabledDay(currentMomentCopy, minDate, maxDate)) {
+    // We overwrite the onClick function with a function which returns null (do nothing).
+    return <td className={cls} {...props} onClick={() => null}>{i}</td>;    
+  } else {
+    return <td className={cls} {...props}>{i}</td>;
+  }
 };
 
 export default class Calendar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTime: this.props.moment,
+      prevMonthShouldBeDisabled: false,
+      nextMonthShouldBeDisabled: false
+    }
+
+    this.selectDate = this.selectDate.bind(this);
+    this.prevMonth = this.prevMonth.bind(this);    
+    this.prevMonthShouldBeDisabled = this.prevMonthShouldBeDisabled.bind(this);
+    this.nextMonth = this.nextMonth.bind(this);    
+    this.nextMonthShouldBeDisabled = this.nextMonthShouldBeDisabled.bind(this);
+    this.setCurrentTime = this.setCurrentTime.bind(this);
+  }
+
+  componentDidMount() {
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
+  }
+
   selectDate = (i, w) => {
     const prevMonth = w === 0 && i > 7;
     const nextMonth = w >= 4 && i <= 14;
     const m = this.props.moment;
 
-    if (prevMonth) m.subtract(1, 'month');
-    if (nextMonth) m.add(1, 'month');
+    if (prevMonth) {
+      m.subtract(1, 'month');
+    }
+
+    if (nextMonth) {
+      m.add(1, 'month');
+    }
 
     m.date(i);
 
     this.props.onChange(m);
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
   prevMonth = e => {
     e.preventDefault();
-    this.props.onChange(this.props.moment.subtract(1, 'month'));
+    const momentCopy = this.props.moment;
+    const { minDate } = this.props;
+
+    momentCopy.subtract(1, 'month');
+
+    if (momentCopy.isBefore(minDate, 'day')) {
+      momentCopy.endOf('month');
+    }
+
+    this.props.onChange(this.setCurrentTime(momentCopy));          
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
+  };
+
+
+  prevMonthShouldBeDisabled = currentMoment => {
+    const currentMomentCopy = moment(currentMoment);
+
+    currentMomentCopy.subtract(1, 'month');
+    currentMomentCopy.endOf('month');
+
+    this.setState({
+      prevMonthShouldBeDisabled: currentMomentCopy.isBefore(this.props.minDate)
+    });
   };
 
   nextMonth = e => {
     e.preventDefault();
-    this.props.onChange(this.props.moment.add(1, 'month'));
+    const momentCopy = this.props.moment;
+    const { maxDate } = this.props;
+
+    momentCopy.add(1, 'month');
+
+    if (momentCopy.isAfter(maxDate, 'day')) {
+      momentCopy.startOf('month');
+    }
+
+    this.props.onChange(this.setCurrentTime(momentCopy));
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
+  nextMonthShouldBeDisabled = currentMoment => {
+    const currentMomentCopy = moment(currentMoment);
+
+    currentMomentCopy.add(1, 'month');
+    currentMomentCopy.startOf('month');
+
+    this.setState({
+      nextMonthShouldBeDisabled: currentMomentCopy.isAfter(this.props.maxDate)
+    });
+  };
+
+  setCurrentTime = m => {
+    m.hours(moment().hours());
+    m.minutes(moment().minutes());
+    m.seconds(moment().seconds());
+    m.milliseconds(moment().milliseconds());
+
+    return m;
+  }
+
   render() {
     const m = this.props.moment;
     const d = m.date();
+    const month = m.month();
+    const year = m.year();
     const d1 = m.clone().subtract(1, 'month').endOf('month').date();
     const d2 = m.clone().date(1).day();
     const d3 = m.clone().endOf('month').date();
@@ -52,15 +157,37 @@ export default class Calendar extends Component {
       range(1, 42 - d3 - d2 + 1)
     );
     const weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const minDate = this.props.minDate;
+    const maxDate = this.props.maxDate;
 
     return (
       <div className={cx('m-calendar', this.props.className)}>
         <div className="toolbar">
-          <button type="button" className="prev-month" onClick={this.prevMonth}>
+          <button 
+            type="button"
+            className={
+              cx({
+                'prev-month': true,
+                'prev-month-disabled': this.state.prevMonthShouldBeDisabled
+              })
+            }
+            onClick={this.prevMonth}
+            disabled={this.state.prevMonthShouldBeDisabled}
+            >
             <i className={this.props.prevMonthIcon} />
           </button>
           <span className="current-date">{m.format('MMMM YYYY')}</span>
-          <button type="button" className="next-month" onClick={this.nextMonth}>
+          <button 
+            type="button"
+            className={
+              cx({
+                'next-month': true,
+                'next-month-disabled': this.state.nextMonthShouldBeDisabled
+              })
+            }
+            onClick={this.nextMonth}
+            disabled={this.state.nextMonthShouldBeDisabled}
+            >
             <i className={this.props.nextMonthIcon} />
           </button>
         </div>
@@ -75,14 +202,18 @@ export default class Calendar extends Component {
           <tbody>
             {chunk(days, 7).map((row, w) =>
               <tr key={w}>
-                {row.map(i =>
-                  <Day
+                {row.map(i => {
+                  return <Day
                     key={i}
                     i={i}
                     d={d}
                     w={w}
                     onClick={() => this.selectDate(i, w)}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    currentMoment={m}
                   />
+                }
                 )}
               </tr>
             )}

src/input-moment.js

@@ -9,7 +9,9 @@ export default class InputMoment extends Component {
     prevMonthIcon: 'ion-ios-arrow-left',
     nextMonthIcon: 'ion-ios-arrow-right',
     minStep: 1,
-    hourStep: 1
+    hourStep: 1,
+    minDate: null,
+    maxDate: null
   };
 
   state = {
@@ -36,6 +38,8 @@ export default class InputMoment extends Component {
       minStep,
       hourStep,
       onSave,
+      minDate, 
+      maxDate,
       ...props
     } = this.props;
     const cls = cx('m-input-moment', className);
@@ -66,6 +70,8 @@ export default class InputMoment extends Component {
             onChange={this.props.onChange}
             prevMonthIcon={this.props.prevMonthIcon}
             nextMonthIcon={this.props.nextMonthIcon}
+            minDate={this.props.minDate}
+            maxDate={this.props.maxDate}
           />
           <Time
             className={cx('tab', { 'is-active': tab === 1 })}

src/less/calendar.less

@@ -29,7 +29,7 @@
   }
 
   tbody td {
-    color: #666666;
+    color: @color-gray-40;
 
     &:hover {
       background: @color-blue;
@@ -43,9 +43,34 @@
     font-weight: bold;
   }
 
+  .disabled-day {
+    background-color: @color-gray;
+    color: @color-gray-40;
+    cursor: not-allowed;
+    opacity: .4;
+
+    &.current-day {
+      color: @color-blue;
+
+      &:hover {
+        color: @color-blue;
+      }
+    }
+
+    &:hover {
+      background-color: @color-gray;
+      border-color: @color-gray;
+      color: @color-gray-40;
+    }
+  }
+
   .prev-month,
   .next-month {
-    color: #999999;
+    color: @color-gray-60;
+
+    &-disabled {
+      opacity: .4;
+    }
   }
 
   .toolbar {
@@ -69,6 +94,10 @@
       outline: 0;
       z-index: 5;
       cursor: pointer;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
     }
 
     .prev-month {

src/less/variables.less

@@ -1,5 +1,7 @@
 @color-blue: #1385e5;
 @color-gray: #dfe0e4;
+@color-gray-60: #999999;
+@color-gray-40: #666666;
 @color-white: #ffffff;
 @slider-handle-size: 20px;
 @slider-size: 4px;