From 74757a6d4652cab5c12f2a95c2241322ae7329ad Mon Sep 17 00:00:00 2001
From: Christian Rank <christian.rank@eventinc.de>
Date: Wed, 18 Apr 2018 16:16:17 +0200
Subject: [PATCH] feat: disable months in the past

---
 README.md                       |  6 ++++++
 src/Calendar.jsx                | 15 +++++++++++++
 src/calendar/CalendarHeader.jsx | 38 ++++++++++++++++++++++-----------
 tests/Calendar.spec.jsx         | 14 ++++++++++++
 4 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 3a4172d9b..839ff9c4d 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,12 @@ http://react-component.github.io/calendar/examples/index.html
           <td></td>
           <td>called when panel changed</td>
         </tr>
+        <tr>
+          <td>disableMonthsInPast</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>whether to disable the year and month arrows on the left that link to dates in the past</td>
+        </tr>
     </tbody>
 </table>
 
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
index 0c6dd0ab0..bdf65e6f8 100644
--- a/src/Calendar.jsx
+++ b/src/Calendar.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import KeyCode from 'rc-util/lib/KeyCode';
+import moment from 'moment';
 import DateTable from './date/DateTable';
 import CalendarHeader from './calendar/CalendarHeader';
 import CalendarFooter from './calendar/CalendarFooter';
@@ -74,6 +75,7 @@ const Calendar = createReactClass({
     disabledTime: PropTypes.any,
     renderFooter: PropTypes.func,
     renderSidebar: PropTypes.func,
+    disableMonthsInPast: PropTypes.bool,
   },
 
   mixins: [CommonMixin, CalendarMixin],
@@ -218,6 +220,7 @@ const Calendar = createReactClass({
       locale, prefixCls, disabledDate,
       dateInputPlaceholder, timePicker,
       disabledTime,
+      disableMonthsInPast,
     } = props;
     const { value, selectedValue, mode } = state;
     const showTimePicker = mode === 'time';
@@ -245,6 +248,16 @@ const Calendar = createReactClass({
       timePickerEle = React.cloneElement(timePicker, timePickerProps);
     }
 
+    const disablePreviousMonth = (
+      disableMonthsInPast &&
+      value.clone().startOf('month').valueOf() <= moment().startOf('month').valueOf()
+    );
+
+    const disablePreviousYear = (
+      disableMonthsInPast &&
+      value.clone().startOf('year').valueOf() <= moment().startOf('year').valueOf()
+    );
+
     const dateInputElement = props.showDateInput ? (
       <DateInput
         format={this.getFormat()}
@@ -274,6 +287,8 @@ const Calendar = createReactClass({
             onPanelChange={this.onPanelChange}
             showTimePicker={showTimePicker}
             prefixCls={prefixCls}
+            disablePreviousMonth={disablePreviousMonth}
+            disablePreviousYear={disablePreviousYear}
           />
           {timePicker && showTimePicker ?
             (<div className={`${prefixCls}-time-picker`}>
diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx
index 13bc5e120..6a952ee21 100644
--- a/src/calendar/CalendarHeader.jsx
+++ b/src/calendar/CalendarHeader.jsx
@@ -33,6 +33,8 @@ const CalendarHeader = createReactClass({
     enablePrev: PropTypes.any,
     enableNext: PropTypes.any,
     disabledMonth: PropTypes.func,
+    disablePreviousMonth: PropTypes.bool,
+    disablePreviousYear: PropTypes.bool,
   },
 
   getDefaultProps() {
@@ -142,6 +144,8 @@ const CalendarHeader = createReactClass({
       enableNext,
       enablePrev,
       disabledMonth,
+      disablePreviousMonth,
+      disablePreviousYear,
     } = props;
 
     let panel = null;
@@ -184,19 +188,29 @@ const CalendarHeader = createReactClass({
     return (<div className={`${prefixCls}-header`}>
       <div style={{ position: 'relative' }}>
         {showIf(enablePrev && !showTimePicker,
-          <a
-            className={`${prefixCls}-prev-year-btn`}
-            role="button"
-            onClick={this.previousYear}
-            title={locale.previousYear}
-          />)}
+          disablePreviousYear ? (
+            <span className={`${prefixCls}-prev-year-btn disabled`} />
+          ) : (
+            <a
+              className={`${prefixCls}-prev-year-btn`}
+              role="button"
+              onClick={this.previousYear}
+              title={locale.previousYear}
+            />
+          )
+        )}
         {showIf(enablePrev && !showTimePicker,
-          <a
-            className={`${prefixCls}-prev-month-btn`}
-            role="button"
-            onClick={this.previousMonth}
-            title={locale.previousMonth}
-          />)}
+          disablePreviousMonth ? (
+            <span className={`${prefixCls}-prev-month-btn disabled`} />
+          ) : (
+            <a
+              className={`${prefixCls}-prev-month-btn`}
+              role="button"
+              onClick={this.previousMonth}
+              title={locale.previousMonth}
+            />
+          )
+        )}
         {this.monthYearElement(showTimePicker)}
         {showIf(enableNext && !showTimePicker,
           <a
diff --git a/tests/Calendar.spec.jsx b/tests/Calendar.spec.jsx
index f57bdecb2..3d5de5f69 100644
--- a/tests/Calendar.spec.jsx
+++ b/tests/Calendar.spec.jsx
@@ -28,6 +28,20 @@ describe('Calendar', () => {
       const wrapper = mount(<Calendar showToday={false}/>);
       expect(wrapper.find('.rc-calendar-today-btn').length).toBe(0);
     });
+
+    describe('disableMonthsInPast', () => {
+      it('render disableMonthsInPast true correctly', () => {
+        const wrapper = mount(<Calendar disableMonthsInPast />);
+        expect(wrapper.find('.rc-calendar-prev-year-btn.disabled')).toHaveLength(1);
+        expect(wrapper.find('.rc-calendar-prev-month-btn.disabled')).toHaveLength(1);
+      });
+
+      it('render disableMonthsInPast false correctly', () => {
+        const wrapper = mount(<Calendar />);
+        expect(wrapper.find('.rc-calendar-prev-year-btn.disabled')).toHaveLength(0);
+        expect(wrapper.find('.rc-calendar-prev-month-btn.disabled')).toHaveLength(0);
+      });
+    });
   });
 
   describe('timePicker', () => {