diff --git a/src/calendar.jsx b/src/calendar.jsx
index 68153b489..7a6cea6e8 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 7a10d0519..f3f11ee53 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