feat: years and months are disabled based on disabledDate

assets/index/YearPanel.less

@@ -95,6 +95,16 @@
 
 .@{prefixClass}-year-panel-cell {
   text-align: center;
+
+  &-disabled {
+      .@{prefixClass}-year-panel-year {
+          color: #bfbfbf;
+          &:hover {
+              background: white;
+              cursor: not-allowed;
+          }
+      }
+  }
 }
 
 .@{prefixClass}-year-panel-year {

examples/start-end-range.js

@@ -119,6 +119,18 @@ class Demo extends React.Component {
     return endValue.diff(startValue, 'days') < 0;
   }
 
+  disabledDate = (current) => {
+    if (!current) {
+      // allow empty select
+      return false;
+    }
+    const date = moment();
+    date.hour(0);
+    date.minute(0);
+    date.second(0);
+    return current.valueOf() < date.valueOf();  // can not select days before today
+  }
+
   render() {
     const state = this.state;
     return (
@@ -132,6 +144,7 @@ class Demo extends React.Component {
             open={this.state.startOpen}
             value={[state.startValue, state.endValue]}
             onChange={this.onStartChange}
+            disabledDate={ this.disabledDate}
           />
         </p>
 

src/Calendar.jsx

@@ -341,6 +341,7 @@ class Calendar extends React.Component {
           renderFooter={renderFooter}
           showTimePicker={showTimePicker}
           prefixCls={prefixCls}
+          disabledDate={disabledDate}
         />
         {timePicker && showTimePicker ?
           (<div className={`${prefixCls}-time-picker`}>

src/MonthCalendar.jsx

@@ -100,7 +100,7 @@ class MonthCalendar extends React.Component {
             mode={mode}
             value={value}
             locale={props.locale}
-            disabledMonth={props.disabledDate}
+            disabledDate={props.disabledDate}
             monthCellRender={props.monthCellRender}
             monthCellContentRender={props.monthCellContentRender}
             onMonthSelect={this.onSelect}

src/calendar/CalendarHeader.jsx

@@ -31,6 +31,7 @@ export default class CalendarHeader extends React.Component {
     locale: PropTypes.object,
     enablePrev: PropTypes.any,
     enableNext: PropTypes.any,
+    disabledDate: PropTypes.func,
     disabledMonth: PropTypes.func,
     renderFooter: PropTypes.func,
     onMonthSelect: PropTypes.func,
@@ -152,6 +153,7 @@ export default class CalendarHeader extends React.Component {
       showTimePicker,
       enableNext,
       enablePrev,
+      disabledDate,
       disabledMonth,
       renderFooter,
     } = props;
@@ -165,7 +167,8 @@ export default class CalendarHeader extends React.Component {
           rootPrefixCls={prefixCls}
           onSelect={this.onMonthSelect}
           onYearPanelShow={() => this.showYearPanel('month')}
-          disabledDate={disabledMonth}
+          disabledDate={disabledDate}
+          disabledMonth={disabledMonth}
           cellRender={props.monthCellRender}
           contentRender={props.monthCellContentRender}
           renderFooter={renderFooter}
@@ -182,6 +185,7 @@ export default class CalendarHeader extends React.Component {
           onSelect={this.onYearSelect}
           onDecadePanelShow={this.showDecadePanel}
           renderFooter={renderFooter}
+          disabledDate={disabledDate}
         />
       );
     }

src/date/DateTBody.jsx

@@ -33,6 +33,7 @@ export default class DateTBody extends React.Component {
     contentRender: PropTypes.func,
     dateRender: PropTypes.func,
     disabledDate: PropTypes.func,
+    disabledMonth: PropTypes.func,
     prefixCls: PropTypes.string,
     selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
     value: PropTypes.object,
@@ -48,7 +49,7 @@ export default class DateTBody extends React.Component {
     const props = this.props;
     const {
       contentRender, prefixCls, selectedValue, value,
-      showWeekNumber, dateRender, disabledDate,
+      showWeekNumber, dateRender, disabledDate, disabledMonth,
       hoverValue,
     } = props;
     let iIndex;
@@ -183,15 +184,26 @@ export default class DateTBody extends React.Component {
           cls += ` ${lastDayOfMonthClass}`;
         }
 
-        if (disabledDate) {
-          if (disabledDate(current, value)) {
+        if (disabledDate || disabledMonth) {
+          if (
+            (disabledDate && disabledDate(current, value))
+            || (disabledMonth && disabledMonth(value))
+          ) {
             disabled = true;
 
-            if (!last || !disabledDate(last, value)) {
+            if (
+              !last
+              || (disabledDate && !disabledDate(last, value))
+              || (disabledMonth && disabledMonth(last))
+            ) {
               cls += ` ${firstDisableClass}`;
             }
 
-            if (!next || !disabledDate(next, value)) {
+            if (
+              !next
+              || (disabledDate && !disabledDate(next, value))
+              || (disabledMonth && disabledMonth(next))
+            ) {
               cls += ` ${lastDisableClass}`;
             }
           }

src/month/MonthPanel.jsx

@@ -15,6 +15,7 @@ class MonthPanel extends React.Component {
   static propTypes = {
     onChange: PropTypes.func,
     disabledDate: PropTypes.func,
+    disabledMonth: PropTypes.func,
     onSelect: PropTypes.func,
     renderFooter: PropTypes.func,
     rootPrefixCls: PropTypes.string,
@@ -105,6 +106,7 @@ class MonthPanel extends React.Component {
           <div className={`${prefixCls}-body`}>
             <MonthTable
               disabledDate={props.disabledDate}
+              disabledMonth={props.disabledMonth}
               onSelect={this.setAndSelectValue}
               locale={locale}
               value={value}

src/month/MonthTable.js

@@ -71,11 +71,20 @@ class MonthTable extends Component {
     const monthsEls = months.map((month, index) => {
       const tds = month.map(monthData => {
         let disabled = false;
-        if (props.disabledDate) {
+
+        if (props.disabledDate || props.disabledMonth) {
           const testValue = value.clone();
           testValue.month(monthData.value);
-          disabled = props.disabledDate(testValue);
+
+          if (props.disabledDate) {
+            disabled = props.disabledDate(testValue);
+          }
+
+          if (props.disabledMonth) {
+            disabled = props.disabledMonth(testValue);
+          }
         }
+
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
           [`${prefixCls}-cell-disabled`]: disabled,

src/range-calendar/CalendarPart.js

@@ -18,6 +18,7 @@ export default class CalendarPart extends React.Component {
     format: PropTypes.any,
     placeholder: PropTypes.any,
     disabledDate: PropTypes.any,
+    disabledMonth: PropTypes.any,
     timePicker: PropTypes.any,
     disabledTime: PropTypes.any,
     onInputChange: PropTypes.func,
@@ -40,7 +41,7 @@ export default class CalendarPart extends React.Component {
       mode,
       direction,
       locale, format, placeholder,
-      disabledDate, timePicker, disabledTime,
+      disabledDate, timePicker, disabledTime, disabledMonth,
       timePickerDisabledTime, showTimePicker,
       onInputChange, onInputSelect, enablePrev, enableNext,
       clearIcon,
@@ -102,7 +103,8 @@ export default class CalendarPart extends React.Component {
             enablePrev={enablePrev}
             onValueChange={props.onValueChange}
             onPanelChange={props.onPanelChange}
-            disabledMonth={props.disabledMonth}
+            disabledMonth={disabledMonth}
+            disabledDate={disabledDate}
           />
           {showTimePicker ? <div className={`${prefixCls}-time-picker`}>
             <div className={`${prefixCls}-time-picker-panel`}>
@@ -118,6 +120,7 @@ export default class CalendarPart extends React.Component {
               onSelect={props.onSelect}
               onDayHover={props.onDayHover}
               disabledDate={disabledDate}
+              disabledMonth={disabledMonth}
               showWeekNumber={props.showWeekNumber}
             />
           </div>

src/year/YearPanel.jsx

@@ -67,8 +67,17 @@ export default class YearPanel extends React.Component {
 
     const yeasEls = years.map((row, index) => {
       const tds = row.map(yearData => {
+        let disabled = false;
+
+        if (props.disabledDate) {
+          const testValue = value.clone();
+          testValue.year(yearData.year);
+          disabled = props.disabledDate(testValue);
+        }
+
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
+          [`${prefixCls}-cell-disabled`]: disabled,
           [`${prefixCls}-selected-cell`]: yearData.year === currentYear,
           [`${prefixCls}-last-decade-cell`]: yearData.year < startYear,
           [`${prefixCls}-next-decade-cell`]: yearData.year > endYear,
@@ -86,7 +95,7 @@ export default class YearPanel extends React.Component {
             role="gridcell"
             title={yearData.title}
             key={yearData.content}
-            onClick={clickHandler}
+            onClick={disabled ? null : clickHandler}
             className={classnames(classNameMap)}
           >
             <a