Calendar does not refresh when date changes

[mansi-mms]

Hi! Has anyone found a workaround for this issue? I have an inline date picker and custom buttons added. <button onClick={getThisWeekRange}> {t('thisWeek')} </button> const getThisWeekRange = () => { setStartDate(startOfWeek(currentDay, [])); setEndDate(endOfToday()); } If a previous month is opened and I click this button, the range is set correctly, but I still see that month. I want to refresh the date picker in order to see the month of 'this week'

Originally posted by @mansi-mms in https://github.com/Hacker0x01/react-datepicker/issues/2411#issuecomment-987011069

[els-mikhail-molchanov]

@mansi-mms you can try to play with date picker's internal setSelected() method that can be accessed via reference (it is not present in type declarations though). I have the same problem at the moment and for now I decided to just close the calendar once the range is selected. While setSelected() method mentioned above works almost correctly it still gives me some side effects that I don't have time to fight with atm.

[stale[bot]]

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.

[marensas]

I had a similar problem:

1. selected two dates (date range mode).
2. later on reselected "Today|Tomorrow|This week|..." button which set dates programmatically.
3. end date selected in 1. step was still in the calendar.

setPreSelection() method saved my day.

[pciarach]

Any updates regarding this? Relying on the internal (i.e. not included in typings) ref's methods does not seem to be the best idea in the long run :(

[pokhrelashok]

Facing similar issue. Anyone has found any workaround to this?

[VadymVyshnevskiy]

Have similar issue. I add custom buttons for quick select of range, but it's not throwing to start of selected range. And my calendar works only through apply button, so just close calendar is not fit for me. Also it has a custom input. Any ideas?

[Mirec17]

Having the same issue here (using version 3.8.0):

• I have a react-datepicker which calendar is always opened.
• User can select the date using calendar, text input OR by clicking one of several predefined options (like "Last month", "Last year")
• Please note that calendar has to stay opened even after selecting the date

Issue is that if user clicks on "Last month" then the date is properly changed (even text-input value is changed) but calendar still shows the old selected day.

The only workaround I found (and I understand it is not ideal) is to change key of the react-datepicker component whenever user clicks on one of the predefined options (changing the key makes sure that calendar is created from scratch and correct value is shown)

[angenue]

having the same issue. When a user click on a date and i change the year, the month for the date they clicked on doesnt change. For example, if i click on a date in january 2023 and change the year to 2024, all the months get updated accordingly EXCEPT january 2023

[dukwar]

I had a similar problem:

1. selected two dates (date range mode).
2. later on reselected "Today|Tomorrow|This week|..." button which set dates programmatically.
3. end date selected in 1. step was still in the calendar.

setPreSelection() method saved my day.

This problem kept me from sleeping for a long time, in the end, indeed, the setPreSelection("your date") method works great and seems even safe, I have often seen code where other developers use methods (which are not specified in the types initially) and in this there is no problem, the main thing is that it is appropriate, thanks for the solution

I’ll explain a little about my problem, maybe it will be useful.

I needed to make a mask of the format dd.MM.yyyy - dd.MM.yyyy, accordingly, I had one datepicker and an input built into it, the data in the input was changed manually with its own useState, and accordingly there was a validation that automatically replaced the invalid date at both sides.

The problem was that when changing the date (which was validated and was set in the datepicker), the calendar did not change.

Using setPreSelection you can now cleverly play around with the situation, that is, when setting startDate you can set setPreselection(startDate), also with endDate.

It’s really interesting that when you change the data in the input manually, without using react-datepicker props for the input, then when you set the date manually, the calendar does not want to change, fortunately this is the solution.

in general, you can do without the crutch solution of changing the key

[sagarCS]

@Mirec17 update key prop for complete refresh of calender is not working for me as it takes away the focus from the custom input field, Any update or solution you guys have found please share

[sagarCS]

setSelected @els-mikhail-molchanov can you share some code or example, how I can use setSelected method of react-datepicker in my component. thanks!