diff --git a/src/day.tsx b/src/day.tsx index 1c28426a5e..49c59ff613 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -312,6 +312,7 @@ export default class Day extends Component { if ( selectsEnd && startDate && + !endDate && (isAfter(selectingDate, startDate) || isEqual(selectingDate, startDate)) ) { return isDayInRange(day, startDate, selectingDate); diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index eeb3d83976..d820374ed3 100644 --- a/src/test/datepicker_test.test.tsx +++ b/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( + , + ); + + 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( + , + ); + + 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"); diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx index 12d2692a06..a17775c073 100644 --- a/src/test/day_test.test.tsx +++ b/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, });