From 0390790fd97cc62e608a6a33b3834623b8432525 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Tue, 31 Oct 2017 17:48:00 +0100
Subject: [PATCH 1/9] minDate & maxDate related starting point raised

---
 example/app.js         |  5 +++
 src/calendar.js        | 86 +++++++++++++++++++++++++++++++++++++-----
 src/input-moment.js    |  8 +++-
 src/less/calendar.less | 13 +++++++
 4 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/example/app.js b/example/app.js
index 406b3b2..24189af 100644
--- a/example/app.js
+++ b/example/app.js
@@ -20,6 +20,9 @@ class App extends Component {
   };
 
   render() {
+    const maxDate = moment();
+    maxDate.set('month', moment().month() + 1);
+
     return (
       <div className="app">
         <h1>
@@ -35,6 +38,8 @@ class App extends Component {
             onChange={this.handleChange}
             minStep={5}
             onSave={this.handleSave}
+            minDate={moment()}
+            maxDate={maxDate}
           />
         </form>
       </div>
diff --git a/src/calendar.js b/src/calendar.js
index 6b8071f..cf536b6 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -4,26 +4,46 @@ import cx from 'classnames';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 
-const Day = ({ i, w, d, className, ...props }) => {
+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();
+
+  if (nextMonth) {
+    currentMomentCopy.set('month', currentMoment.month() + 1);
+  }
+
   const cls = cx({
     'prev-month': prevMonth,
     'next-month': nextMonth,
-    'current-day': !prevMonth && !nextMonth && i === d
+    'current-day': !prevMonth && !nextMonth && i === d,
+    'disabled-day': minDate ? i < minDate.date() && currentMomentCopy.month() === currentMoment.month() : false ||
+      maxDate ? i > maxDate.date() : false
   });
 
   return <td className={cls} {...props}>{i}</td>;
 };
 
 export default class Calendar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTime: this.props.moment
+    }
+  }
   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);
 
@@ -32,17 +52,39 @@ export default class Calendar extends Component {
 
   prevMonth = e => {
     e.preventDefault();
-    this.props.onChange(this.props.moment.subtract(1, 'month'));
+    const minDate = this.props.minDate;
+
+    if (!this.props.moment.isBefore(minDate) && !this.props.moment.isSame(minDate)) {
+      this.props.onChange(this.props.moment.subtract(1, 'month'));      
+    }
   };
 
   nextMonth = e => {
     e.preventDefault();
-    this.props.onChange(this.props.moment.add(1, 'month'));
+    const maxDate = this.props.maxDate;
+
+    console.log('this.props.moment.isAfter(maxDate)', this.props.moment.isAfter(maxDate));
+    console.log('this.props.moment.isSame(maxDate, month)', this.props.moment.isSame(maxDate, 'month')); 
+    console.log('this.props.moment.isSame(maxDate, day)', this.props.moment.isSame(maxDate, 'day'));        
+
+    if (!this.props.moment.isAfter(maxDate) && !this.props.moment.isSame(maxDate)) {
+      this.props.onChange(this.props.moment.add(1, 'month'));
+
+      console.log('this.props.moment', this.props.moment);      
+      console.log('this.props.moment.isAfter(maxDate)', this.props.moment.isAfter(maxDate));
+      console.log('this.props.moment.isSame(maxDate, month)', this.props.moment.isSame(maxDate, 'month')); 
+      console.log('this.props.moment.isSame(maxDate, day)', this.props.moment.isSame(maxDate, 'day')); 
+    }
   };
 
   render() {
+    const minDate = this.props.minDate;
+    const maxDate = this.props.maxDate;
+    const currentMoment = this.props.moment;
     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();
@@ -56,11 +98,31 @@ export default class Calendar extends Component {
     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': currentMoment.isBefore(minDate) || currentMoment.isSame(minDate, 'day') && currentMoment.isSame(mindate, 'month')
+              })
+            }
+            onClick={this.prevMonth}
+            disabled={currentMoment.isBefore(minDate) || currentMoment.isSame(minDate, 'day') && currentMoment.isSame(minDate, 'month')}
+            >
             <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': currentMoment.isAfter(maxDate) || currentMoment.isSame(maxDate, 'day') && currentMoment.isSame(maxDate, 'month')
+              })
+            }
+            onClick={this.nextMonth}
+            disabled={currentMoment.isAfter(maxDate) || currentMoment.isSame(maxDate, 'day') && currentMoment.isSame(maxDate, 'month')}
+            >
             <i className={this.props.nextMonthIcon} />
           </button>
         </div>
@@ -75,14 +137,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}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    currentMoment={currentMoment}
                     onClick={() => this.selectDate(i, w)}
                   />
+                }
                 )}
               </tr>
             )}
diff --git a/src/input-moment.js b/src/input-moment.js
index a8b35c0..b313ff7 100644
--- a/src/input-moment.js
+++ b/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 })}
diff --git a/src/less/calendar.less b/src/less/calendar.less
index cad93a5..e439e7f 100644
--- a/src/less/calendar.less
+++ b/src/less/calendar.less
@@ -43,9 +43,18 @@
     font-weight: bold;
   }
 
+  .disabled-day {
+    opacity: .4;
+    text-decoration: line-through;
+  }
+
   .prev-month,
   .next-month {
     color: #999999;
+
+    &-disabled {
+      opacity: .4;
+    }
   }
 
   .toolbar {
@@ -69,6 +78,10 @@
       outline: 0;
       z-index: 5;
       cursor: pointer;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
     }
 
     .prev-month {

From f296a31668c29f8960d780c20de9217f99c6e2d7 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Thu, 2 Nov 2017 17:39:51 +0100
Subject: [PATCH 2/9] Some improvements WIP

---
 example/app.js         |  8 ++++-
 src/calendar.js        | 81 +++++++++++++++++++++++++++++-------------
 src/less/calendar.less | 26 +++++++++++---
 3 files changed, 84 insertions(+), 31 deletions(-)

diff --git a/example/app.js b/example/app.js
index 24189af..98c8ded 100644
--- a/example/app.js
+++ b/example/app.js
@@ -21,7 +21,13 @@ class App extends Component {
 
   render() {
     const maxDate = moment();
+    const minDate = moment();
     maxDate.set('month', moment().month() + 1);
+    maxDate.date(23);
+    minDate.date(11);
+
+    console.log('maxDate from app.js', maxDate);
+    console.log('minDate from app.js', minDate);
 
     return (
       <div className="app">
@@ -38,7 +44,7 @@ class App extends Component {
             onChange={this.handleChange}
             minStep={5}
             onSave={this.handleSave}
-            minDate={moment()}
+            minDate={minDate}
             maxDate={maxDate}
           />
         </form>
diff --git a/src/calendar.js b/src/calendar.js
index cf536b6..8cd6c33 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -4,24 +4,32 @@ import cx from 'classnames';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 
+const isDisabledDay = (currentMoment, minDate, maxDate) => !currentMoment.isBetween(minDate, maxDate, null, '[]'); // '[]' indicates inclusion of both values.
+
 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();
+  const currentMomentCopy = moment(currentMoment); // Moment clone.
+  currentMomentCopy.date(i);
 
-  if (nextMonth) {
-    currentMomentCopy.set('month', currentMoment.month() + 1);
+  if (prevMonth) {
+    currentMomentCopy.subtract(1, 'month');
+  } else if (nextMonth) {
+    currentMomentCopy.add(1, 'month');
   }
 
   const cls = cx({
     'prev-month': prevMonth,
     'next-month': nextMonth,
     'current-day': !prevMonth && !nextMonth && i === d,
-    'disabled-day': minDate ? i < minDate.date() && currentMomentCopy.month() === currentMoment.month() : false ||
-      maxDate ? i > maxDate.date() : false
+    'disabled-day': isDisabledDay(currentMomentCopy, minDate, maxDate)
   });
 
-  return <td className={cls} {...props}>{i}</td>;
+  if (isDisabledDay(currentMomentCopy, minDate, maxDate)) {
+    return <td className={cls} {...props} onClick={() => null}>{i}</td>;    
+  } else {
+    return <td className={cls} {...props}>{i}</td>;
+  }
 };
 
 export default class Calendar extends Component {
@@ -29,9 +37,17 @@ export default class Calendar extends Component {
     super(props);
 
     this.state = {
-      currentTime: this.props.moment
+      currentTime: this.props.moment,
+      previousMonthShouldBeDisabled: false,
+      nextMonthShouldBeDisabled: false
     }
   }
+
+  componentDidMount() {
+    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
+  }
+   
   selectDate = (i, w) => {
     const prevMonth = w === 0 && i > 7;
     const nextMonth = w >= 4 && i <= 14;
@@ -48,34 +64,49 @@ export default class Calendar extends Component {
     m.date(i);
 
     this.props.onChange(m);
+    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
   prevMonth = e => {
     e.preventDefault();
     const minDate = this.props.minDate;
 
-    if (!this.props.moment.isBefore(minDate) && !this.props.moment.isSame(minDate)) {
-      this.props.onChange(this.props.moment.subtract(1, 'month'));      
-    }
+    this.props.onChange(this.props.moment.subtract(1, 'month'));
+    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
   nextMonth = e => {
     e.preventDefault();
     const maxDate = this.props.maxDate;
 
-    console.log('this.props.moment.isAfter(maxDate)', this.props.moment.isAfter(maxDate));
-    console.log('this.props.moment.isSame(maxDate, month)', this.props.moment.isSame(maxDate, 'month')); 
-    console.log('this.props.moment.isSame(maxDate, day)', this.props.moment.isSame(maxDate, 'day'));        
+    this.props.onChange(this.props.moment.add(1, 'month'));
+    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.nextMonthShouldBeDisabled(this.state.currentTime);
+  };
 
-    if (!this.props.moment.isAfter(maxDate) && !this.props.moment.isSame(maxDate)) {
-      this.props.onChange(this.props.moment.add(1, 'month'));
+  previousMonthShouldBeDisabled = currentMoment => {
+    const currentMomentCopy = moment(currentMoment);
 
-      console.log('this.props.moment', this.props.moment);      
-      console.log('this.props.moment.isAfter(maxDate)', this.props.moment.isAfter(maxDate));
-      console.log('this.props.moment.isSame(maxDate, month)', this.props.moment.isSame(maxDate, 'month')); 
-      console.log('this.props.moment.isSame(maxDate, day)', this.props.moment.isSame(maxDate, 'day')); 
-    }
-  };
+    currentMomentCopy.subtract(1, 'month');
+    currentMomentCopy.endOf('month');
+ 
+    this.setState({
+      previousMonthShouldBeDisabled: currentMomentCopy.isBefore(this.props.minDate)
+    });
+  }
+
+  nextMonthShouldBeDisabled = currentMoment => {
+    const currentMomentCopy = moment(currentMoment);
+
+    currentMomentCopy.add(1, 'month');
+    currentMomentCopy.startOf('month');
+
+    this.setState({
+      nextMonthShouldBeDisabled: currentMomentCopy.isAfter(this.props.maxDate)
+    });
+  }
 
   render() {
     const minDate = this.props.minDate;
@@ -103,11 +134,11 @@ export default class Calendar extends Component {
             className={
               cx({
                 'prev-month': true,
-                'prev-month-disabled': currentMoment.isBefore(minDate) || currentMoment.isSame(minDate, 'day') && currentMoment.isSame(mindate, 'month')
+                'prev-month-disabled': this.state.previousMonthShouldBeDisabled
               })
             }
             onClick={this.prevMonth}
-            disabled={currentMoment.isBefore(minDate) || currentMoment.isSame(minDate, 'day') && currentMoment.isSame(minDate, 'month')}
+            disabled={this.state.previousMonthShouldBeDisabled}
             >
             <i className={this.props.prevMonthIcon} />
           </button>
@@ -117,11 +148,11 @@ export default class Calendar extends Component {
             className={
               cx({
                 'next-month': true,
-                'next-month-disabled': currentMoment.isAfter(maxDate) || currentMoment.isSame(maxDate, 'day') && currentMoment.isSame(maxDate, 'month')
+                'next-month-disabled': this.state.nextMonthShouldBeDisabled
               })
             }
             onClick={this.nextMonth}
-            disabled={currentMoment.isAfter(maxDate) || currentMoment.isSame(maxDate, 'day') && currentMoment.isSame(maxDate, 'month')}
+            disabled={this.state.nextMonthShouldBeDisabled}
             >
             <i className={this.props.nextMonthIcon} />
           </button>
diff --git a/src/less/calendar.less b/src/less/calendar.less
index e439e7f..d052c8c 100644
--- a/src/less/calendar.less
+++ b/src/less/calendar.less
@@ -43,11 +43,6 @@
     font-weight: bold;
   }
 
-  .disabled-day {
-    opacity: .4;
-    text-decoration: line-through;
-  }
-
   .prev-month,
   .next-month {
     color: #999999;
@@ -57,6 +52,27 @@
     }
   }
 
+  .disabled-day {
+    background-color: black;
+    color: white;
+    cursor: not-allowed;
+    opacity: .4;
+
+    &.current-day {
+      color: @color-blue;
+
+      &:hover {
+        color: @color-blue;
+      }
+    }
+
+    &:hover {
+      background-color: black;
+      border-color: @color-gray;
+      color: white;
+    }
+  }
+
   .toolbar {
     line-height: 30px;
     color: @color-blue;

From f847d17177c37858a0cd2ebdc5bdda2003e95d53 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Thu, 2 Nov 2017 18:34:23 +0100
Subject: [PATCH 3/9] CSS improvements and remove console.log

---
 example/app.js          | 11 -----------
 src/calendar.js         |  9 ++++++---
 src/less/calendar.less  | 12 ++++++------
 src/less/variables.less |  2 ++
 4 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/example/app.js b/example/app.js
index 98c8ded..406b3b2 100644
--- a/example/app.js
+++ b/example/app.js
@@ -20,15 +20,6 @@ class App extends Component {
   };
 
   render() {
-    const maxDate = moment();
-    const minDate = moment();
-    maxDate.set('month', moment().month() + 1);
-    maxDate.date(23);
-    minDate.date(11);
-
-    console.log('maxDate from app.js', maxDate);
-    console.log('minDate from app.js', minDate);
-
     return (
       <div className="app">
         <h1>
@@ -44,8 +35,6 @@ class App extends Component {
             onChange={this.handleChange}
             minStep={5}
             onSave={this.handleSave}
-            minDate={minDate}
-            maxDate={maxDate}
           />
         </form>
       </div>
diff --git a/src/calendar.js b/src/calendar.js
index 8cd6c33..7846310 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -4,20 +4,23 @@ import cx from 'classnames';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 
-const isDisabledDay = (currentMoment, minDate, maxDate) => !currentMoment.isBetween(minDate, maxDate, null, '[]'); // '[]' indicates inclusion of both values.
+const isDisabledDay = (currentMoment, minDate, maxDate) => !currentMoment.isBetween(minDate, maxDate);
 
 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.
-  currentMomentCopy.date(i);
 
   if (prevMonth) {
     currentMomentCopy.subtract(1, 'month');
-  } else if (nextMonth) {
+  }
+
+  if (nextMonth) {
     currentMomentCopy.add(1, 'month');
   }
 
+  currentMomentCopy.date(i); 
+
   const cls = cx({
     'prev-month': prevMonth,
     'next-month': nextMonth,
diff --git a/src/less/calendar.less b/src/less/calendar.less
index d052c8c..d4102d0 100644
--- a/src/less/calendar.less
+++ b/src/less/calendar.less
@@ -29,7 +29,7 @@
   }
 
   tbody td {
-    color: #666666;
+    color: @color-gray-40;
 
     &:hover {
       background: @color-blue;
@@ -45,7 +45,7 @@
 
   .prev-month,
   .next-month {
-    color: #999999;
+    color: @color-gray-60;
 
     &-disabled {
       opacity: .4;
@@ -53,8 +53,8 @@
   }
 
   .disabled-day {
-    background-color: black;
-    color: white;
+    background-color: @color-gray;
+    color: @color-gray-40;
     cursor: not-allowed;
     opacity: .4;
 
@@ -67,9 +67,9 @@
     }
 
     &:hover {
-      background-color: black;
+      background-color: @color-gray;
       border-color: @color-gray;
-      color: white;
+      color: @color-gray-40;
     }
   }
 
diff --git a/src/less/variables.less b/src/less/variables.less
index e0676c0..0922eb2 100644
--- a/src/less/variables.less
+++ b/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;

From 96bf840473585bae561dfb074e72ba2281cdebf0 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Thu, 2 Nov 2017 18:36:40 +0100
Subject: [PATCH 4/9] Temporal solution if ! minDate nor maxDate

---
 src/calendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/calendar.js b/src/calendar.js
index 7846310..64487dc 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -25,7 +25,7 @@ const Day = ({ i, w, d, minDate, maxDate, currentMoment, className, ...props })
     'prev-month': prevMonth,
     'next-month': nextMonth,
     'current-day': !prevMonth && !nextMonth && i === d,
-    'disabled-day': isDisabledDay(currentMomentCopy, minDate, maxDate)
+    'disabled-day': minDate && maxDate ? isDisabledDay(currentMomentCopy, minDate, maxDate) : false
   });
 
   if (isDisabledDay(currentMomentCopy, minDate, maxDate)) {

From b1cb6fd167907c04c7438ab0fb805c21c984c681 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Fri, 3 Nov 2017 13:01:31 +0100
Subject: [PATCH 5/9] Code refactoring & some improvements Allow no minDate
 prop Allow no maxDate prop Allow no minDate & no maxDate props Change the way
 we calculate disabled days (using isBefore and isAfter instead of isBetween)

---
 example/app.js         |  6 +++++-
 src/calendar.js        |  4 ++--
 src/less/calendar.less | 18 +++++++++---------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/example/app.js b/example/app.js
index 406b3b2..047efce 100644
--- a/example/app.js
+++ b/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>
diff --git a/src/calendar.js b/src/calendar.js
index 64487dc..9c84660 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 
-const isDisabledDay = (currentMoment, minDate, maxDate) => !currentMoment.isBetween(minDate, maxDate);
+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;
@@ -25,7 +25,7 @@ const Day = ({ i, w, d, minDate, maxDate, currentMoment, className, ...props })
     'prev-month': prevMonth,
     'next-month': nextMonth,
     'current-day': !prevMonth && !nextMonth && i === d,
-    'disabled-day': minDate && maxDate ? isDisabledDay(currentMomentCopy, minDate, maxDate) : false
+    'disabled-day': minDate || maxDate ? isDisabledDay(currentMomentCopy, minDate, maxDate) : false
   });
 
   if (isDisabledDay(currentMomentCopy, minDate, maxDate)) {
diff --git a/src/less/calendar.less b/src/less/calendar.less
index d4102d0..7a4f725 100644
--- a/src/less/calendar.less
+++ b/src/less/calendar.less
@@ -43,15 +43,6 @@
     font-weight: bold;
   }
 
-  .prev-month,
-  .next-month {
-    color: @color-gray-60;
-
-    &-disabled {
-      opacity: .4;
-    }
-  }
-
   .disabled-day {
     background-color: @color-gray;
     color: @color-gray-40;
@@ -73,6 +64,15 @@
     }
   }
 
+  .prev-month,
+  .next-month {
+    color: @color-gray-60;
+
+    &-disabled {
+      opacity: .4;
+    }
+  }
+
   .toolbar {
     line-height: 30px;
     color: @color-blue;

From 88b23fbcb7f8ca2e461b29dbab6921a277d5fe39 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Fri, 3 Nov 2017 14:47:50 +0100
Subject: [PATCH 6/9] Respect minDate & maxDate on month change Start of month
 as date if nextMonth clicked & moment is after maxDate End of month as date
 if prevMonth clicked & moment is before minDate

---
 src/calendar.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/calendar.js b/src/calendar.js
index 9c84660..55ff49c 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -73,18 +73,32 @@ export default class Calendar extends Component {
 
   prevMonth = e => {
     e.preventDefault();
-    const minDate = this.props.minDate;
+    const momentCopy = this.props.moment;
+    const { minDate, maxDate } = this.props;
+
+    momentCopy.subtract(1, 'month');
+
+    if (momentCopy.isBefore(minDate)) {
+      momentCopy.endOf('month');
+    }
 
-    this.props.onChange(this.props.moment.subtract(1, 'month'));
+    this.props.onChange(momentCopy);          
     this.previousMonthShouldBeDisabled(this.state.currentTime);
     this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
   nextMonth = e => {
     e.preventDefault();
-    const maxDate = this.props.maxDate;
+    const momentCopy = this.props.moment;
+    const { minDate, maxDate } = this.props;
+
+    momentCopy.add(1, 'month');
+
+    if (momentCopy.isAfter(maxDate)) {
+      momentCopy.startOf('month');
+    }
 
-    this.props.onChange(this.props.moment.add(1, 'month'));
+    this.props.onChange(momentCopy);
     this.previousMonthShouldBeDisabled(this.state.currentTime);
     this.nextMonthShouldBeDisabled(this.state.currentTime);
   };

From 7e491497aa2654adb0f735f5736930a2f3851e0d Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Fri, 3 Nov 2017 14:51:57 +0100
Subject: [PATCH 7/9] Update README.md with minDate & maxDate

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 35ccf10..4c792df 100644
--- a/README.md
+++ b/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.

From 200c22961d5f0fad59898932a0e9652d4ce8c401 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Fri, 3 Nov 2017 17:54:49 +0100
Subject: [PATCH 8/9] Naming changes. Remove unused variables. Other
 improvements. Set current time each time same date on next or prev month is
 not between minDate & maxDate

---
 src/calendar.js | 75 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/calendar.js b/src/calendar.js
index 55ff49c..76a9b6f 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -29,6 +29,7 @@ const Day = ({ i, w, d, minDate, maxDate, currentMoment, className, ...props })
   });
 
   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>;
@@ -41,13 +42,20 @@ export default class Calendar extends Component {
 
     this.state = {
       currentTime: this.props.moment,
-      previousMonthShouldBeDisabled: false,
+      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.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
     this.nextMonthShouldBeDisabled(this.state.currentTime);
   }
    
@@ -67,53 +75,54 @@ export default class Calendar extends Component {
     m.date(i);
 
     this.props.onChange(m);
-    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
     this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
   prevMonth = e => {
     e.preventDefault();
     const momentCopy = this.props.moment;
-    const { minDate, maxDate } = this.props;
+    const { minDate } = this.props;
 
     momentCopy.subtract(1, 'month');
 
-    if (momentCopy.isBefore(minDate)) {
+    if (momentCopy.isBefore(minDate, 'day')) {
       momentCopy.endOf('month');
     }
 
-    this.props.onChange(momentCopy);          
-    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    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();
     const momentCopy = this.props.moment;
-    const { minDate, maxDate } = this.props;
+    const { maxDate } = this.props;
 
     momentCopy.add(1, 'month');
 
-    if (momentCopy.isAfter(maxDate)) {
+    if (momentCopy.isAfter(maxDate, 'day')) {
       momentCopy.startOf('month');
     }
 
-    this.props.onChange(momentCopy);
-    this.previousMonthShouldBeDisabled(this.state.currentTime);
+    this.props.onChange(this.setCurrentTime(momentCopy));
+    this.prevMonthShouldBeDisabled(this.state.currentTime);
     this.nextMonthShouldBeDisabled(this.state.currentTime);
   };
 
-  previousMonthShouldBeDisabled = currentMoment => {
-    const currentMomentCopy = moment(currentMoment);
-
-    currentMomentCopy.subtract(1, 'month');
-    currentMomentCopy.endOf('month');
- 
-    this.setState({
-      previousMonthShouldBeDisabled: currentMomentCopy.isBefore(this.props.minDate)
-    });
-  }
-
   nextMonthShouldBeDisabled = currentMoment => {
     const currentMomentCopy = moment(currentMoment);
 
@@ -123,12 +132,18 @@ export default class Calendar extends Component {
     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 minDate = this.props.minDate;
-    const maxDate = this.props.maxDate;
-    const currentMoment = this.props.moment;
     const m = this.props.moment;
     const d = m.date();
     const month = m.month();
@@ -142,6 +157,8 @@ 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)}>
@@ -151,11 +168,11 @@ export default class Calendar extends Component {
             className={
               cx({
                 'prev-month': true,
-                'prev-month-disabled': this.state.previousMonthShouldBeDisabled
+                'prev-month-disabled': this.state.prevMonthShouldBeDisabled
               })
             }
             onClick={this.prevMonth}
-            disabled={this.state.previousMonthShouldBeDisabled}
+            disabled={this.state.prevMonthShouldBeDisabled}
             >
             <i className={this.props.prevMonthIcon} />
           </button>
@@ -191,10 +208,10 @@ export default class Calendar extends Component {
                     i={i}
                     d={d}
                     w={w}
+                    onClick={() => this.selectDate(i, w)}
                     minDate={minDate}
                     maxDate={maxDate}
-                    currentMoment={currentMoment}
-                    onClick={() => this.selectDate(i, w)}
+                    currentMoment={m}
                   />
                 }
                 )}

From 32d3c51e2f14165d56760acbfe78e86759fdf3e3 Mon Sep 17 00:00:00 2001
From: Ander Conal <ander.conal@gmail.com>
Date: Fri, 3 Nov 2017 17:58:37 +0100
Subject: [PATCH 9/9] Update snapshot test

---
 __tests__/__snapshots__/input-moment.js.snap | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/__tests__/__snapshots__/input-moment.js.snap b/__tests__/__snapshots__/input-moment.js.snap
index 0f140b7..a382ab1 100644
--- a/__tests__/__snapshots__/input-moment.js.snap
+++ b/__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"
         >