diff --git a/src/month.jsx b/src/month.jsx
index 72b8ba650..7a1ba7e42 100644
--- a/src/month.jsx
+++ b/src/month.jsx
@@ -201,6 +201,38 @@ export default class Month extends React.Component {
return false;
};
+ isSelectingMonthRangeStart = (m) => {
+ if (!this.isInSelectingRangeMonth(m)) {
+ return false;
+ }
+
+ const { day, startDate, selectsStart } = this.props;
+ const _month = utils.setMonth(day, m);
+ const selectingDate = this.props.selectingDate ?? this.props.preSelection;
+
+ if (selectsStart) {
+ return utils.isSameMonth(_month, selectingDate);
+ } else {
+ return utils.isSameMonth(_month, startDate);
+ }
+ };
+
+ isSelectingMonthRangeEnd = (m) => {
+ if (!this.isInSelectingRangeMonth(m)) {
+ return false;
+ }
+
+ const { day, endDate, selectsEnd, selectsRange } = this.props;
+ const _month = utils.setMonth(day, m);
+ const selectingDate = this.props.selectingDate ?? this.props.preSelection;
+
+ if (selectsEnd || selectsRange) {
+ return utils.isSameMonth(_month, selectingDate);
+ } else {
+ return utils.isSameMonth(_month, endDate);
+ }
+ };
+
isInSelectingRangeQuarter = (q) => {
const { day, selectsStart, selectsEnd, selectsRange, startDate, endDate } =
this.props;
@@ -501,6 +533,10 @@ export default class Month extends React.Component {
),
"react-datepicker__month-text--range-start": this.isRangeStartMonth(m),
"react-datepicker__month-text--range-end": this.isRangeEndMonth(m),
+ "react-datepicker__month-text--selecting-range-start":
+ this.isSelectingMonthRangeStart(m),
+ "react-datepicker__month-text--selecting-range-end":
+ this.isSelectingMonthRangeEnd(m),
"react-datepicker__month-text--today": this.isCurrentMonth(day, m),
}
);
diff --git a/test/month_test.js b/test/month_test.js
index 1a8cd5b7f..07021a8d9 100644
--- a/test/month_test.js
+++ b/test/month_test.js
@@ -413,6 +413,43 @@ describe("Month", () => {
expect(months.length).to.equal(0);
});
+
+ it("should add 'selecting-range-start' class to the start selecting month", () => {
+ const monthComponent = mount(
+
+ );
+ const months = monthComponent.find(
+ ".react-datepicker__month-text--selecting-range-start"
+ );
+ expect(months.length).to.equal(1);
+ expect(months.at(0).text()).to.eq("Feb");
+ });
+
+ it("should add 'selecting-range-end' class to the end selecting month", () => {
+ const monthComponent = mount(
+
+ );
+ const months = monthComponent.find(
+ ".react-datepicker__month-text--selecting-range-end"
+ );
+ expect(months.length).to.equal(1);
+ expect(months.at(0).text()).to.eq("Jun");
+ });
});
describe("selecting quarter range", () => {