Setting the `shownDate` prop on `<DateRange />` does not seem to be doing anything

[LucyMac]

Issue with DateRange's shownDate prop

I am setting the shownDate prop to a date in the past, but on initial load the DateRange calendar always opens on today's date, not on the date set in shownDate

Steps to reproduce

Let's take today's example. It's the 2nd August, and when I open the calendar (set to a 2-month view) it shows me the month of August on the left, and the month of September on the right-hand side, with today's date highlighted.

However I have set the shownDate prop to the 31st July, and I therefore expect the calendar to show me July on the left, and August on the right. In other words, I would like the opening view to be based on the shownDate rather than today's date.

Code snippet:

      <DateRange
        onChange={setSelectedRange}
        months={2}
        ranges={range}
        minDate={Sun Jul 08 2018 00:00:00 GMT+0100 (British Summer Time)}
        maxDate={Sat Jul 31 2021 00:00:00 GMT+0100 (British Summer Time)}
        shownDate={Sat Jul 31 2021 00:00:00 GMT+0100 (British Summer Time)}      // not having any impact
      />

Expected behaviour

I expect the DateRange calendar to open up with the shownDate in view. Likeso:

Am I missing something here?

Environment

Package Version: ^1.3.0 React version: ^16.13.1 Node version: 12.16.3 Browser: Chrome 92.0.4515.107

[kamyar]

    shownDate={Sat Jul 31 2021 00:00:00 GMT+0100 (British Summer Time)}

How are you exactly passing the value? Is that a string or you are passing a date object? I am a bit confused by the snippet tbh

[LucyMac]

Thanks for responding @kamyar - it's a date object, formatted using date-fns' parse method. I receive these dates in a "yyyy-MM-dd" format from an API, and I then convert them to date objects so that DateRange can consume them.

It works fine for minDate and maxDate (as you can see from the grey 'disabled' highlights on all dates after 31 July) which is why I am assuming the format of what I'm passing to shownDate is not the issue here?

[kamyar]

Thanks for the explanation. I am currently on vacation but will try to take a look. Can you include a complete code snippet with sample date definition so I can test it and try to reproduce it?

[muneebdeveloper]

I am also getting the same problem. It is not focusing on provided date to shownDate prop

[noname-username]

same problem, I keep date in my components' state and pass it to shownDate prop, but DateRange only re-render when I hover a mouse over it for example.

[HurYur]

I had a similar issue with <Calendar /> component when shownDate was passed it wasn't focusing on it. But then I realized that date was before minDate.

So my fix was to not pass date if it before minDate.

[danyalg]

Hey @kamyar Do you have any solution for it ?