diff --git a/src/calendar.jsx b/src/calendar.jsx index 68153b489e..7a6cea6e84 100644 --- a/src/calendar.jsx +++ b/src/calendar.jsx @@ -54,7 +54,7 @@ const DROPDOWN_FOCUS_CLASSNAMES = [ const isDropdownSelect = (element = {}) => { const classNames = (element.className || "").split(/\s+/); return DROPDOWN_FOCUS_CLASSNAMES.some( - (testClassname) => classNames.indexOf(testClassname) >= 0 + (testClassname) => classNames.indexOf(testClassname) >= 0, ); }; @@ -63,7 +63,6 @@ export default class Calendar extends React.Component { return { onDropdownFocus: () => {}, monthsShown: 1, - monthSelectedIn: 0, forceShowMonthNavigation: false, timeCaption: "Time", previousYearButtonLabel: "Previous Year", @@ -98,7 +97,7 @@ export default class Calendar extends React.Component { PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date), - }) + }), ), filterDate: PropTypes.func, fixedHeight: PropTypes.bool, @@ -110,7 +109,7 @@ export default class Calendar extends React.Component { PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date), - }) + }), ), includeTimes: PropTypes.array, injectTimes: PropTypes.array, @@ -242,13 +241,13 @@ export default class Calendar extends React.Component { ) { const hasMonthChanged = !isSameMonth( this.state.date, - this.props.preSelection + this.props.preSelection, ); this.setState( { date: this.props.preSelection, }, - () => hasMonthChanged && this.handleCustomMonthChange(this.state.date) + () => hasMonthChanged && this.handleCustomMonthChange(this.state.date), ); } else if ( this.props.openToDate && @@ -297,7 +296,7 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: addMonths(date, 1), }), - () => this.handleMonthChange(this.state.date) + () => this.handleMonthChange(this.state.date), ); }; @@ -306,7 +305,7 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: subMonths(date, 1), }), - () => this.handleMonthChange(this.state.date) + () => this.handleMonthChange(this.state.date), ); }; @@ -382,7 +381,7 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: setYear(date, year), }), - () => this.handleYearChange(this.state.date) + () => this.handleYearChange(this.state.date), ); }; @@ -391,7 +390,7 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: setMonth(date, month), }), - () => this.handleMonthChange(this.state.date) + () => this.handleMonthChange(this.state.date), ); }; @@ -400,7 +399,7 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: setYear(setMonth(date, getMonth(monthYear)), getYear(monthYear)), }), - () => this.handleMonthYearChange(this.state.date) + () => this.handleMonthYearChange(this.state.date), ); }; @@ -408,7 +407,7 @@ export default class Calendar extends React.Component { const startOfWeek = getStartOfWeek( date, this.props.locale, - this.props.calendarStartDay + this.props.calendarStartDay, ); const dayNames = []; @@ -416,7 +415,7 @@ export default class Calendar extends React.Component { dayNames.push(
{this.props.weekLabel || "#"} -
+ , ); } return dayNames.concat( @@ -433,13 +432,13 @@ export default class Calendar extends React.Component { key={offset} className={classnames( "react-datepicker__day-name", - weekDayClassName + weekDayClassName, )} > {weekDayName} ); - }) + }), ); }; @@ -457,10 +456,10 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: subYears( date, - this.props.showYearPicker ? this.props.yearItemNumber : 1 + this.props.showYearPicker ? this.props.yearItemNumber : 1, ), }), - () => this.handleYearChange(this.state.date) + () => this.handleYearChange(this.state.date), ); }; @@ -558,10 +557,10 @@ export default class Calendar extends React.Component { ({ date }) => ({ date: addYears( date, - this.props.showYearPicker ? this.props.yearItemNumber : 1 + this.props.showYearPicker ? this.props.yearItemNumber : 1, ), }), - () => this.handleYearChange(this.state.date) + () => this.handleYearChange(this.state.date), ); }; @@ -781,22 +780,22 @@ export default class Calendar extends React.Component { const prevMonthButtonDisabled = monthDisabledBefore( this.state.date, - this.props + this.props, ); const nextMonthButtonDisabled = monthDisabledAfter( this.state.date, - this.props + this.props, ); const prevYearButtonDisabled = yearDisabledBefore( this.state.date, - this.props + this.props, ); const nextYearButtonDisabled = yearDisabledAfter( this.state.date, - this.props + this.props, ); const showDayNames = @@ -867,8 +866,9 @@ export default class Calendar extends React.Component { ? this.props.monthsShown - 1 : 0; var fromMonthDate = subMonths(this.state.date, monthsToSubtract); + var monthSelectedIn = this.props.monthSelectedIn ?? monthsToSubtract; for (var i = 0; i < this.props.monthsShown; ++i) { - var monthsToAdd = i - this.props.monthSelectedIn; + var monthsToAdd = i - monthSelectedIn + monthsToSubtract; var monthDate = addMonths(fromMonthDate, monthsToAdd); var monthKey = `month-${i}`; var monthShowsDuplicateDaysEnd = i < this.props.monthsShown - 1; @@ -946,7 +946,7 @@ export default class Calendar extends React.Component { monthShowsDuplicateDaysEnd={monthShowsDuplicateDaysEnd} monthShowsDuplicateDaysStart={monthShowsDuplicateDaysStart} /> - + , ); } return monthList; @@ -1030,7 +1030,7 @@ export default class Calendar extends React.Component { renderAriaLiveRegion = () => { const { startPeriod, endPeriod } = getYearsPeriod( this.state.date, - this.props.yearItemNumber + this.props.yearItemNumber, ); let ariaLiveMessage; @@ -1044,7 +1044,7 @@ export default class Calendar extends React.Component { } else { ariaLiveMessage = `${getMonthInLocale( getMonth(this.state.date), - this.props.locale + this.props.locale, )} ${getYear(this.state.date)}`; } diff --git a/test/calendar_test.test.js b/test/calendar_test.test.js index 7a10d0519f..f3f11ee530 100644 --- a/test/calendar_test.test.js +++ b/test/calendar_test.test.js @@ -197,6 +197,20 @@ describe("Calendar", () => { }); }); + it("should render the months correctly adjusted by monthSelectedIn for showPreviousMonths", () => { + const selected = utils.newDate("2018-11-19"); + const calendar = getCalendar({ + inline: true, + monthsShown: 2, + selected, + showPreviousMonths: true, + }); + calendar.setProps({ monthSelectedIn: 1 }, () => { + const renderedMonths = calendar.find(Month); + expect(utils.getMonth(renderedMonths.first().prop("day"))).toEqual(9); + }); + }); + it("should render the correct default aria labels for next and prev months buttons", () => { const calendar = getCalendar(); const previousButtonAriaLabel = calendar