Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The "previous month" button appears when selecting a date #5193

Open
ahrybouskaja-easyjet opened this issue Oct 25, 2024 · 3 comments
Open

Comments

@ahrybouskaja-easyjet
Copy link

Describe the bug
The "previous month" button appears when selecting a date

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/p/sandbox/reactdatepicker-forked-kxtkd8
  2. Prev button absent
    image
  3. Select date in second month
  4. Prev button appears
    image

Expected behavior
the "previous month" button does not appear because the calendar starts in October

Additional context
Add any other context about the problem here.
v.6.9.0 also reproduced in 7.4.0

@pmacmillan
Copy link
Contributor

This seems to fix the issue. Basically the current code relies on the date selected. However if multiple calendars are selected then it doesn't know if the min month is rendered.

Borrowed some code from renderMonths to do the necessary math (monthSelectedIn is the relative calendar offset that the date is selected in -- so in your first example it's 0, and in the second example it's 1).

image

So the fix is likely to consider which was the 0th calendar rendered by applying the same math. (i.e. if the first month calendar is October and the selected date is in November, then we need to subtract 1 to ensure we're checking the correct date.

not creating a PR because tests (even on a clean checkout) aren't passing for me.

diff --git a/src/calendar.tsx b/src/calendar.tsx
index 461e1c81..799de807 100644
--- a/src/calendar.tsx
+++ b/src/calendar.tsx
@@ -543,7 +543,17 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
         );
         break;
       default:
-        allPrevDaysDisabled = monthDisabledBefore(this.state.date, this.props);
+        const monthsShown =
+          this.props.monthsShown ?? Calendar.defaultProps.monthsShown;
+        const monthsToSubtract = this.props.showPreviousMonths
+          ? monthsShown - 1
+          : 0;
+
+        const monthSelectedIn = this.props.monthSelectedIn ?? monthsToSubtract;
+        const fromMonthDate = subMonths(this.state.date, monthSelectedIn);
+
+        allPrevDaysDisabled = monthDisabledBefore(fromMonthDate, this.props);
+
         break;
     }

@OlegDev1
Copy link
Contributor

OlegDev1 commented Nov 5, 2024

@pmacmillan You just have to move all the variable declarations out of default and add some tests. Can i do that and open a PR or do you want to do it yourself?

@pmacmillan
Copy link
Contributor

@pmacmillan You just have to move all the variable declarations out of default and add some tests. Can i do that and open a PR [...]?

Please do!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants