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", () => {