🐛 Fix '--in-selecting-range' class apply condition for End Date Picker

- Updated the condition to apply the mentioned class on the other months only if the endDate is not specified

Closes #5502

Author: balajis-qb

src/day.tsx

@@ -312,6 +312,7 @@ export default class Day extends Component<DayProps> {
     if (
       selectsEnd &&
       startDate &&
+      !endDate &&
       (isAfter(selectingDate, startDate) || isEqual(selectingDate, startDate))
     ) {
       return isDayInRange(day, startDate, selectingDate);

src/test/datepicker_test.test.tsx

@@ -56,6 +56,14 @@ function goToLastMonth(container: HTMLElement) {
   fireEvent.click(lastMonthButton!);
 }
 
+function goToNextMonth(container: HTMLElement) {
+  const nextMonthButton = safeQuerySelector(
+    container,
+    ".react-datepicker__navigation-icon--next",
+  );
+  fireEvent.click(nextMonthButton!);
+}
+
 function formatDayWithZeros(day: number) {
   const dayString = day.toString();
 
@@ -3109,6 +3117,65 @@ describe("DatePicker", () => {
     });
   });
 
+  describe("is-selecting-range", () => {
+    const IN_RANGE_DAY_CLASS_NAME = "react-datepicker__day--in-selecting-range";
+
+    it("should apply '--in-selecting-range' class to the days till the preselected keyboard date on navigating to the next month without selecting endDate in the endDatePicker", () => {
+      const preselectedDay = 5;
+      const startDate = new Date(`2025/02/${preselectedDay}`);
+
+      const { container } = render(
+        <DatePicker
+          inline
+          selectsEnd
+          startDate={startDate}
+          minDate={startDate}
+        />,
+      );
+
+      goToNextMonth(container);
+
+      for (let i = 1; i <= preselectedDay; i++) {
+        const inSelectionRangeDay = safeQuerySelector(
+          container,
+          `.react-datepicker__day--00${i}`,
+        );
+        expect(
+          inSelectionRangeDay.classList.contains(IN_RANGE_DAY_CLASS_NAME),
+        ).toBe(true);
+      }
+    });
+
+    it("should not apply '--in-selecting-range' class to the days till the date that matched selectedDate in the next months (endDatePicker)", () => {
+      const startDay = 3;
+      const endDay = 8;
+      const startDate = new Date(`2025/02/${startDay}`);
+      const endDate = new Date(`2025/02/${endDay}`);
+
+      const { container } = render(
+        <DatePicker
+          inline
+          selectsEnd
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate}
+        />,
+      );
+
+      goToNextMonth(container);
+
+      for (let i = 1; i <= endDay; i++) {
+        const inSelectionRangeDay = safeQuerySelector(
+          container,
+          `.react-datepicker__day--00${i}`,
+        );
+        expect(
+          inSelectionRangeDay.classList.contains(IN_RANGE_DAY_CLASS_NAME),
+        ).toBe(false);
+      }
+    });
+  });
+
   describe("selectsRange without inline", () => {
     it("should have preSelection set to startDate upon opening", () => {
       const startDate = new Date("2021-04-20 00:00:00");

src/test/day_test.test.tsx

@@ -688,15 +688,13 @@ describe("Day", () => {
     });
 
     describe("for an end date picker", () => {
-      it("should highlight for dates after the start date", () => {
-        const { startDate, endDate } = createDateRange(-1, 1);
+      it("should highlight all dates after the start date (if the endDate is not selected yet)", () => {
+        const { startDate } = createDateRange(-1, 1);
 
-        // All these should highlight: today, tomorrow (endDate), the day after
         for (let daysFromStart = 1; daysFromStart <= 3; daysFromStart++) {
           const day = addDays(startDate, daysFromStart);
           const container = renderDay(day, {
             startDate,
-            endDate,
             selectingDate: day,
             selectsEnd: true,
           });