diff --git a/README.md b/README.md index 8febbe8b1..bce0733db 100644 --- a/README.md +++ b/README.md @@ -242,6 +242,12 @@ http://react-component.github.io/calendar/examples/index.html specific the clear icon. + + disableMonthsInPast + Boolean + false + whether to disable the year and month arrows on the left that link to dates in the past + diff --git a/src/Calendar.jsx b/src/Calendar.jsx index cd4da4563..a4eddb9dd 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'; @@ -43,6 +44,7 @@ const Calendar = createReactClass({ renderFooter: PropTypes.func, renderSidebar: PropTypes.func, clearIcon: PropTypes.node, + disableMonthsInPast: PropTypes.bool, }, mixins: [CommonMixin, CalendarMixin], @@ -198,6 +200,7 @@ const Calendar = createReactClass({ locale, prefixCls, disabledDate, dateInputPlaceholder, timePicker, disabledTime, clearIcon, + disableMonthsInPast, } = props; const { value, selectedValue, mode } = state; const showTimePicker = mode === 'time'; @@ -225,6 +228,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 ? ( {timePicker && showTimePicker ? (
diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx index e63a7b591..5e4d5f9a0 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() { @@ -143,6 +145,8 @@ const CalendarHeader = createReactClass({ enableNext, enablePrev, disabledMonth, + disablePreviousMonth, + disablePreviousYear, } = props; let panel = null; @@ -185,19 +189,29 @@ const CalendarHeader = createReactClass({ return (
{showIf(enablePrev && !showTimePicker, - )} + disablePreviousYear ? ( + + ) : ( + + ) + )} {showIf(enablePrev && !showTimePicker, - )} + disablePreviousMonth ? ( + + ) : ( + + ) + )} {this.monthYearElement(showTimePicker)} {showIf(enableNext && !showTimePicker, { const wrapper = mount(); expect(wrapper.find('.rc-calendar-today-btn').length).toBe(0); }); + + describe('disableMonthsInPast', () => { + it('render disableMonthsInPast true correctly', () => { + const wrapper = mount(); + 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(); + expect(wrapper.find('.rc-calendar-prev-year-btn.disabled')).toHaveLength(0); + expect(wrapper.find('.rc-calendar-prev-month-btn.disabled')).toHaveLength(0); + }); + }); }); describe('timePicker', () => {