diff --git a/docs/week_number.md b/docs/week_number.md index 55ba540cf..65af5d5ca 100644 --- a/docs/week_number.md +++ b/docs/week_number.md @@ -16,3 +16,4 @@ | `showWeekNumber` | | | | | `showWeekPicker` | | | | | `weekNumber` (required) | | | | +| `isWeekDisabled` | | | | diff --git a/src/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx index 8345ecbcf..7019c7da4 100644 --- a/src/test/week_number_test.test.tsx +++ b/src/test/week_number_test.test.tsx @@ -285,6 +285,44 @@ describe("WeekNumber", () => { ).toBe(true); }); + it("shouldn't have the class 'react-datepicker__week-number--clickable' if isWeekDisabled is true", () => { + const { container } = render( + {}} + isWeekDisabled + />, + ); + const weekNumber = container.querySelector( + ".react-datepicker__week-number", + ); + expect( + weekNumber?.classList.contains( + "react-datepicker__week-number--clickable", + ), + ).toBe(false); + }); + + it("should have the class 'react-datepicker__week-number--clickable' if isWeekDisabled is false and onClick is defined", () => { + const { container } = render( + {}} + isWeekDisabled={false} + />, + ); + const weekNumber = container.querySelector( + ".react-datepicker__week-number", + ); + expect( + weekNumber?.classList.contains( + "react-datepicker__week-number--clickable", + ), + ).toBe(true); + }); + it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is also current week and has the onClick Props", () => { const currentWeekNumber = newDate("2023-10-22T13:09:53+02:00"); const { container } = render( diff --git a/src/week.tsx b/src/week.tsx index a8928699f..1cfee1ad2 100644 --- a/src/week.tsx +++ b/src/week.tsx @@ -113,6 +113,20 @@ export default class Week extends Component { return getWeek(date); }; + isWeekDisabled = (): boolean => { + const startOfWeek = this.startOfWeek(); + const endOfWeek = addDays(startOfWeek, 6); + + let processingDate = new Date(startOfWeek); + while (processingDate <= endOfWeek) { + if (!this.isDisabled(processingDate)) return false; + + processingDate = addDays(processingDate, 1); + } + + return true; + }; + renderDays = () => { const startOfWeek = this.startOfWeek(); const days = []; @@ -128,6 +142,7 @@ export default class Week extends Component { {...Week.defaultProps} {...this.props} weekNumber={weekNumber} + isWeekDisabled={this.isWeekDisabled()} date={startOfWeek} onClick={onClickAction} />, diff --git a/src/week_number.tsx b/src/week_number.tsx index 948d40be6..02a9eb3a2 100644 --- a/src/week_number.tsx +++ b/src/week_number.tsx @@ -18,6 +18,7 @@ interface WeekNumberProps { handleOnKeyDown?: React.KeyboardEventHandler; containerRef?: React.RefObject; isInputFocused?: boolean; + isWeekDisabled?: boolean; } export default class WeekNumber extends Component { @@ -111,13 +112,14 @@ export default class WeekNumber extends Component { render(): React.ReactElement { const { weekNumber, + isWeekDisabled, ariaLabelPrefix = WeekNumber.defaultProps.ariaLabelPrefix, onClick, } = this.props; const weekNumberClasses = { "react-datepicker__week-number": true, - "react-datepicker__week-number--clickable": !!onClick, + "react-datepicker__week-number--clickable": !!onClick && !isWeekDisabled, "react-datepicker__week-number--selected": !!onClick && isSameDay(this.props.date, this.props.selected), };