Selected date keep showing in all months

[toannguyen5597]

Describe the bug
I choose a day 2020/10/25, then all months have highlighted the day 25

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 3.3.0

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eamiralian]

I'm also seeing this behavior

• OS: Windows 10
• Browser: Chrome
• Version 4.1.0

[gforro]

I can report this problem also. Is this a designed feature or a feature by accident (bug)?

[fabiosangregorio]

Same here. In the months-only view this problem is accentuated, since the same month is in the same position in all years (e.g., march is always in the first row, third column). Therefore, all years look exactly the same, which can be confusing in that it's not clear that you are switching years.

[CarpenterJoseph]

Same issue for me

[Akridian]

Faced this issue too.

[selimovicz]

This solution worked for me: https://stackoverflow.com/a/63285080/1452505

[zeus0123]

Try Removing adjustDateOnChange prop. This fixed for me

[leesharon]

A solution that worked for me was setting the minDate to null after the user clicked on next month. When the minDate is null this problem doesn't happen for me. the problem is that the Datepicker component doesn't auto rerender when setting the minDate to null so we need to do it manually and as well save the chosen date.

/*
This set of code addresses a known bug in react-datepicker where the selected day remains visually selected when changing months.

To circumvent this, we are dynamically setting the minDate prop to null when the user navigates to a different month, effectively deselecting the previously selected day.

However, react-datepicker doesn't automatically re-render when we update the minDate state, so it doesn't immediately reflect the updated prop.

To force a re-render of react-datepicker, we generate a new key each time the month changes and apply it to the DatePicker component.
This new key causes React to create a new instance of the DatePicker, reflecting our updated minDate prop.

Since react-datepicker doesn't provide a method to programmatically navigate between months, we maintain our own state variables for the current month and year
and construct a selected date in the current month. This makes the DatePicker display the month we want, without highlighting any specific day in the month.

Note: This is a workaround solution to address the current limitations of react-datepicker. In future versions of the library,
there might be more straightforward solutions, so please check the library's documentation if it's significantly past the last update of this code (June 2023).
*/

const today = new Date();
today.setHours(0, 0, 0, 0);
const [minDate, setMinDate] = useState<null | Date>(new Date(today));

const [key, setKey] = useState(Math.random().toString());
const [displayMonth, setDisplayMonth] = useState(today.getMonth());
const [displayYear, setDisplayYear] = useState(today.getFullYear());

const saveMonthAndYearAndForceReRenderOfDatepicker = (date: Date) => {
setDisplayMonth(date.getMonth());
setDisplayYear(date.getFullYear());
setKey(Math.random().toString());
};

const handleMonthChange = (date: Date) => {
if (date.getMonth() > (chosenPickupDate?.getMonth() || 0)) {
setMinDate(null);
saveMonthAndYearAndForceReRenderOfDatepicker(date);
} else {
setMinDate(new Date(today));
saveMonthAndYearAndForceReRenderOfDatepicker(date);
}
};
const selectedDate = new Date(displayYear, displayMonth, 1);
// *********************************************************************************************

<DatePicker
key={key}
selected={selectedDate}
onChange={onChange}
locale={currentLanguage}
monthsShown={isMobile ? 1 : 3}
startDate={chosenPickupDate}
endDate={chosenReturnDate}
excludeDates={getExcludedDatesFromCurrentLocation()}
selectsRange={!openPickupChooseDate}
inline
onMonthChange={handleMonthChange}
minDate={chosenPickupDate || minDate}
/>

If you want to maintain keyboard navigation (which you should), you can override the default css:

.react-datepicker__day.react-datepicker__day--keyboard-selected {
  background-color: transparent !important;
}

.react-datepicker__day--keyboard-selected:focus-visible {
  background-color: red !important;
}

[AsadAlihp]

for anyone having this issue, you can pass

disabledKeyboardNavigation

prop this fixed the issue for me.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.