Added validRange props in calendar to control date range

components/calendar/Header.tsx

@@ -15,6 +15,7 @@ export interface HeaderProps {
   onValueChange?: (value: moment.Moment) => void;
   onTypeChange?: (type: string) => void;
   value: any;
+  validRange ?: [moment.Moment, moment.Moment];
 }
 
 export default class Header extends React.Component<HeaderProps, any> {
@@ -27,11 +28,21 @@ export default class Header extends React.Component<HeaderProps, any> {
   private calenderHeaderNode: HTMLDivElement;
 
   getYearSelectElement(year: number) {
-    const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props;
-    const start = year - (yearSelectOffset as number);
-    const end = start + (yearSelectTotal as number);
+    const {
+      yearSelectOffset,
+      yearSelectTotal,
+      locale,
+      prefixCls,
+      fullscreen,
+      validRange,
+    } = this.props;
+    let start = year - (yearSelectOffset as number);
+    let end = start + (yearSelectTotal as number);
+    if (validRange) {
+      start = validRange[0].get('year');
+      end = validRange[1].get('year') + 1;
+    }
     const suffix = locale.year === '年' ? '年' : '';
-
     const options: React.ReactElement<any>[] = [];
     for (let index = start; index < end; index++) {
       options.push(<Option key={`${index}`}>{index + suffix}</Option>);
@@ -63,13 +74,22 @@ export default class Header extends React.Component<HeaderProps, any> {
 
   getMonthSelectElement(month: number, months: number[]) {
     const props = this.props;
-    const { prefixCls, fullscreen } = props;
+    const { prefixCls, fullscreen, validRange, value } = props;
     const options: React.ReactElement<any>[] = [];
-
-    for (let index = 0; index < 12; index++) {
+    let start = 0;
+    let end = 12;
+    if (validRange) {
+      const [rangeStart, rangeEnd] = validRange;
+      const currentYear = value.get('year');
+      if (rangeEnd.get('year') === currentYear) {
+        end = rangeEnd.get('month') + 1;
+      } else {
+        start = rangeStart.get('month');
+      }
+    }
+    for (let index = start; index < end; index++) {
       options.push(<Option key={`${index}`}>{months[index]}</Option>);
     }
-
     return (
       <Select
         size={fullscreen ? 'default' : 'small'}
@@ -85,8 +105,21 @@ export default class Header extends React.Component<HeaderProps, any> {
   }
 
   onYearChange = (year: string) => {
-    const newValue = this.props.value.clone();
+    const { value, validRange } = this.props;
+    const newValue = value.clone();
     newValue.year(parseInt(year, 10));
+    // switch the month so that it remains within range when year changes
+    if (validRange) {
+      const [ start, end ] = validRange;
+      const newYear = newValue.get('year');
+      const newMonth = newValue.get('month');
+      if (newYear === end.get('year') && newMonth > end.get('month')) {
+        newValue.month(end.get('month'));
+      }
+      if (newYear === start.get('year') && newMonth < start.get('month')) {
+        newValue.month(start.get('month'));
+      }
+    }
 
     const onValueChange = this.props.onValueChange;
     if (onValueChange) {

components/calendar/__tests__/index.test.js

@@ -15,6 +15,54 @@ describe('Calendar', () => {
     expect(Moment.isMoment(value)).toBe(true);
   });
 
+  it('only Valid range should be selectable', () => {
+    const onSelect = jest.fn();
+    const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
+    const wrapper = mount(
+      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} />
+    );
+    wrapper.find('[title="February 1, 2018"]').at(0).simulate('click');
+    wrapper.find('[title="February 2, 2018"]').at(0).simulate('click');
+    expect(onSelect.mock.calls.length).toBe(1);
+  });
+
+  it('dates other than in valid range should be disabled', () => {
+    const onSelect = jest.fn();
+    const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
+    const wrapper = mount(
+      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} />
+    );
+    wrapper.find('[title="February 20, 2018"]').at(0).simulate('click');
+    const elem = wrapper.find('[title="February 20, 2018"]').hasClass('ant-fullcalendar-disabled-cell');
+    expect(elem).toEqual(true);
+    expect(onSelect.mock.calls.length).toBe(0);
+  });
+
+  it('months other than in valid range should be disabled', () => {
+    const onSelect = jest.fn();
+    const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
+    const wrapper = mount(
+      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} mode="year" />
+    );
+    expect(wrapper.find('[title="Jan"]').at(0).hasClass('ant-fullcalendar-month-panel-cell-disabled')).toBe(true);
+    expect(wrapper.find('[title="Feb"]').at(0).hasClass('ant-fullcalendar-month-panel-cell-disabled')).toBe(false);
+    expect(wrapper.find('[title="Jun"]').at(0).hasClass('ant-fullcalendar-month-panel-cell-disabled')).toBe(true);
+    wrapper.find('[title="Jan"]').at(0).simulate('click');
+    wrapper.find('[title="Mar"]').at(0).simulate('click');
+    expect(onSelect.mock.calls.length).toBe(1);
+  });
+
+  it('getDateRange should returns a disabledDate function', () => {
+    const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
+    const wrapper = mount(
+      <Calendar validRange={validRange} defaultValue={Moment('2018-02-02')} />
+    );
+    const instance = wrapper.instance();
+    const disabledDate = instance.getDateRange(validRange);
+    expect(disabledDate(Moment('2018-06-02'))).toBe(true);
+    expect(disabledDate(Moment('2018-04-02'))).toBe(false);
+  });
+
   it('Calendar should change mode by prop', () => {
     const monthMode = 'month';
     const yearMode = 'year';

components/calendar/index.en-US.md

@@ -43,3 +43,4 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 | value | The current selected date | [moment](http://momentjs.com/) | current date |
 | onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
 | onSelect | Callback for when a date is selected | function(date: moment） | - |
+| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |

components/calendar/index.tsx

@@ -37,6 +37,7 @@ export interface CalendarProps {
   onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
   onSelect?: (date?: moment.Moment) => void;
   disabledDate?: (current: moment.Moment) => boolean;
+  validRange ?: [moment.Moment, moment.Moment];
 }
 
 export interface CalendarState {
@@ -166,6 +167,21 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     this.setValue(value, 'select');
   }
 
+  getDateRange = (
+    validRange: [moment.Moment, moment.Moment],
+    disabledDate?: (current: moment.Moment) => boolean,
+  ) => (current: moment.Moment) => {
+      if (!current) {
+        return false;
+      }
+      const [ startDate, endDate ] = validRange;
+      const inRange = !current.isBetween(startDate, endDate, 'days', '[]');
+      if (disabledDate) {
+        return (disabledDate(current) || inRange);
+      }
+      return inRange;
+    }
+
   renderCalendar = (locale: any, localeCode: string) => {
     const { state, props } = this;
     const { value, mode } = state;
@@ -183,6 +199,12 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     const monthCellRender = monthFullCellRender || this.monthCellRender;
     const dateCellRender = dateFullCellRender || this.dateCellRender;
 
+    let disabledDate = props.disabledDate;
+
+    if (props.validRange) {
+      disabledDate = this.getDateRange(props.validRange, disabledDate);
+    }
+
     return (
       <div className={cls} style={style}>
         <Header
@@ -193,9 +215,11 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
           prefixCls={prefixCls}
           onTypeChange={this.onHeaderTypeChange}
           onValueChange={this.onHeaderValueChange}
+          validRange={props.validRange}
         />
         <FullCalendar
           {...props}
+          disabledDate={disabledDate}
           Select={noop}
           locale={locale.lang}
           type={type}