feat: month selecting start and end date modifiers

Hacker0x01 · Jun 16, 2023 · 1627748 · 1627748
1 parent f0a7b26
commit 1627748
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git 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
@@ -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(
+        <Month
+          preSelection={utils.newDate("2015-01-01")}
+          day={utils.newDate("2015-01-01")}
+          endDate={utils.newDate("2015-03-01")}
+          selectingDate={utils.newDate("2015-02-01")}
+          selectsStart
+          showMonthYearPicker
+        />
+      );
+      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(
+        <Month
+          preSelection={utils.newDate("2015-01-01")}
+          day={utils.newDate("2015-01-01")}
+          startDate={utils.newDate("2015-01-01")}
+          endDate={utils.newDate("2015-03-01")}
+          selectingDate={utils.newDate("2015-06-01")}
+          selectsEnd
+          showMonthYearPicker
+        />
+      );
+      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", () => {