diff --git a/__tests__/__snapshots__/input-moment.js.snap b/__tests__/__snapshots__/input-moment.js.snap
index 0f140b7..1bce3c9 100644
--- a/__tests__/__snapshots__/input-moment.js.snap
+++ b/__tests__/__snapshots__/input-moment.js.snap
@@ -84,43 +84,43 @@ exports[`render 1`] = `
         <tbody>
           <tr>
             <td
-              className="prev-month"
+              className="prev-month valid"
               onClick={[Function]}
             >
               29
             </td>
             <td
-              className="prev-month"
+              className="prev-month valid"
               onClick={[Function]}
             >
               30
             </td>
             <td
-              className="prev-month"
+              className="prev-month valid"
               onClick={[Function]}
             >
               31
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               1
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               2
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               3
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               4
@@ -128,43 +128,43 @@ exports[`render 1`] = `
           </tr>
           <tr>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               5
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               6
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               7
             </td>
             <td
-              className="current-day"
+              className="current-day valid"
               onClick={[Function]}
             >
               8
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               9
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               10
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               11
@@ -172,43 +172,43 @@ exports[`render 1`] = `
           </tr>
           <tr>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               12
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               13
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               14
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               15
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               16
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               17
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               18
@@ -216,43 +216,43 @@ exports[`render 1`] = `
           </tr>
           <tr>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               19
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               20
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               21
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               22
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               23
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               24
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               25
@@ -260,43 +260,43 @@ exports[`render 1`] = `
           </tr>
           <tr>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               26
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               27
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               28
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               29
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               30
             </td>
             <td
-              className=""
+              className="valid"
               onClick={[Function]}
             >
               31
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               1
@@ -304,43 +304,43 @@ exports[`render 1`] = `
           </tr>
           <tr>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               2
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               3
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               4
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               5
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               6
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               7
             </td>
             <td
-              className="next-month"
+              className="next-month valid"
               onClick={[Function]}
             >
               8
diff --git a/src/calendar.js b/src/calendar.js
index 6b8071f..c88f132 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -4,48 +4,59 @@ 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, className, selected, month, isValid, selectDate, ...props }) => {
   const prevMonth = w === 0 && i > 7;
   const nextMonth = w >= 4 && i <= 14;
+  const m = moment(month);
+  if(prevMonth) m.subtract(1, 'month');
+  if(nextMonth) m.add(1, 'month');
+  m.date(i);
+  var valid = isValid(m);
+
   const cls = cx({
     'prev-month': prevMonth,
     'next-month': nextMonth,
-    'current-day': !prevMonth && !nextMonth && i === d
+    'current-day': !prevMonth && !nextMonth && i === d,
+    'valid': valid,
+    'invalid': !valid
   });
 
-  return <td className={cls} {...props}>{i}</td>;
+  return <td className={cls} onClick={() => selectDate(m)} {...props}>{i}</td>;
 };
 
 export default class Calendar extends Component {
-  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');
-
-    m.date(i);
+  constructor(props) {
+    super(props);
+    // The inital month shown on the calendar is the month of the current moment
+    this.state = {month: moment(this.props.moment).startOf('month')};
+  }
+  selectDate = selectMoment => {
+    var m = moment(this.props.moment);
+    m.year(selectMoment.year()).month(selectMoment.month()).date(selectMoment.date());
 
-    this.props.onChange(m);
-  };
+    if(this.props.isValid(m)) {
+      this.setState({month: moment(m).startOf('month')});
+      this.props.onChange(m);
+    }
+  }
 
   prevMonth = e => {
     e.preventDefault();
-    this.props.onChange(this.props.moment.subtract(1, 'month'));
+    this.setState({month: moment(this.state.month).subtract(1, 'month')});
   };
 
   nextMonth = e => {
     e.preventDefault();
-    this.props.onChange(this.props.moment.add(1, 'month'));
+    this.setState({month: moment(this.state.month).add(1, 'month')});
   };
 
   render() {
     const m = this.props.moment;
+    var month = this.state.month;
     const d = m.date();
-    const d1 = m.clone().subtract(1, 'month').endOf('month').date();
-    const d2 = m.clone().date(1).day();
-    const d3 = m.clone().endOf('month').date();
+    const d1 = month.clone().subtract(1, 'month').endOf('month').date();
+    const d2 = month.clone().date(1).day();
+    const d3 = month.clone().endOf('month').date();
     const days = [].concat(
       range(d1 - d2 + 1, d1 + 1),
       range(1, d3 + 1),
@@ -59,7 +70,7 @@ export default class Calendar extends Component {
           <button type="button" className="prev-month" onClick={this.prevMonth}>
             <i className={this.props.prevMonthIcon} />
           </button>
-          <span className="current-date">{m.format('MMMM YYYY')}</span>
+          <span className="current-date">{month.format('MMMM YYYY')}</span>
           <button type="button" className="next-month" onClick={this.nextMonth}>
             <i className={this.props.nextMonthIcon} />
           </button>
@@ -81,7 +92,10 @@ export default class Calendar extends Component {
                     i={i}
                     d={d}
                     w={w}
-                    onClick={() => this.selectDate(i, w)}
+                    month={month}
+                    selected={m}
+                    isValid={this.props.isValid}
+                    selectDate={this.selectDate}
                   />
                 )}
               </tr>
diff --git a/src/input-moment.js b/src/input-moment.js
index a8b35c0..beb3d67 100644
--- a/src/input-moment.js
+++ b/src/input-moment.js
@@ -9,7 +9,8 @@ export default class InputMoment extends Component {
     prevMonthIcon: 'ion-ios-arrow-left',
     nextMonthIcon: 'ion-ios-arrow-right',
     minStep: 1,
-    hourStep: 1
+    hourStep: 1,
+    isValid: () => true
   };
 
   state = {
@@ -36,6 +37,7 @@ export default class InputMoment extends Component {
       minStep,
       hourStep,
       onSave,
+      isValid,
       ...props
     } = this.props;
     const cls = cx('m-input-moment', className);
@@ -66,6 +68,7 @@ export default class InputMoment extends Component {
             onChange={this.props.onChange}
             prevMonthIcon={this.props.prevMonthIcon}
             nextMonthIcon={this.props.nextMonthIcon}
+            isValid={isValid}
           />
           <Time
             className={cx('tab', { 'is-active': tab === 1 })}
diff --git a/src/less/calendar.less b/src/less/calendar.less
index cad93a5..eaafe10 100644
--- a/src/less/calendar.less
+++ b/src/less/calendar.less
@@ -31,7 +31,7 @@
   tbody td {
     color: #666666;
 
-    &:hover {
+    &.valid:hover {
       background: @color-blue;
       border-color: @color-blue;
       color: @color-white;
@@ -48,6 +48,13 @@
     color: #999999;
   }
 
+  .invalid {
+    color: @color-gray;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
   .toolbar {
     line-height: 30px;
     color: @color-blue;