Calendar does not change when dates are changed via input

[andrheapaltao]

As the topic says, the calendar does not switch to the date entered via input box. I have tried it with the demos in storybook: Allow All Days Including Past Days

First enter: 10/25/2019 in startDate

You'll see it is highlighted in the calendar.

2nd: 10/25/2018

3rd: 10/25/2025

As you can see in the 2nd and 3rd input, it does not render the calendar on those years. In order to see the change in calendar, you need to enter start and end date and close the calendar. Right now I am using the ff. settings:

<DateRangePicker
        startDateId="startDate"
        endDateId="endDate"
        startDate={start}
        endDate={end}
        daySize={25}
        onDatesChange={({ startDate, endDate }) => {
          setStateStartDate(startDate);
          setStateEndDate(endDate);
        }}
        focusedInput={focusedInput}
        onFocusChange={focused => {
          if (focused) {
            setStatefocusedInput(focused);
          }
        }}
        keepOpenOnDateSelect
        autoFocus={() => true}
        hideKeyboardShortcutsPanel
        noBorder
        isOutsideRange={() => false}
        customArrowIcon={<i className="fa fa-long-arrow-right ml-2" />}
        numberOfMonths={2}
        showDefaultInputIcon
        inputIconPosition="after"
      />

I am using the keepOpenOnDateSelect for UI/UX purposes.
Question is: How can I re-render the calendar without closing the calendar itself? Is it possible to re-render the calendar upon finished typing?

Also I think it is a bug when isOutsideRange false, the past dates that were selected aren't highlighted. They'll only be highlighted when switching months and they'll be gone when you focus on the month of the date specified. Found this Past Issue with no solution. Is there any solution now?

The demo isn't enough to cover all of the props of the datepicker. I hope there will be more examples on how to properly use the props. Thank you very much in advance.

[pompan129]

any progress on this? I'm having the same problem. onDatesChange is called but with null values.

• Update. my mistake. My issue was happening because the date was an invalid format. and related to issuue Pass invalid values to the onDateChange prop #1937

[AlbertoTonegari]

Hello! 👋
Any progress on this? I am unable to update the calendar date when I type the date from the input in the SingleDatePicker. The calendar updates with the date specified in the input, but in doesn't go automatically to that date. Is there a way to get the following behaviour:

• write the date in the input field and the caledar automatically takes you to that date, whithout the need of clicking the arrows.

An answer will be greatly appreciated.
Thanks a lot!

[kiddailey]

This may be a separate issue, but it feels related. It also doesn't seem to update if you pass startDate or initialVisibleMonth as props and later update those props outside of the component. In other words, through state changes on the parent component. Seems like something is preventing it from seeing the updated dates.

[daniellesuper]

if i understand the issue correctly, i had a similar issue. i was passing an array of objects in that contained the dates i needed highlighted. this array changed in length based on filters that were selected. the calendar would only highlight the initial array of dates passed in, it wouldnt change when the filters values changed. heres what i did to resolve, hope it helps

componentDidUpdate(prevProps: Readonly<any>): void { if (prevProps.calendarEvents.length !== this.props.calendarEvents.length){ if (this.state.focused === null) { this.setState({focused: undefined, date: null}); } else { this.setState({focused: null, date: null}); } } }

[nitish-arora]

Any progress on this? I want to update the dates from outside of calendar and calendar will always in open state.

When I updated the date from outside of the calendar, calendar remained at that month.

[TheHuns]

Also curious if anyone has found a solution for this. Not a deal breaker as this is the best (most customizable) date picker I have found, but this would be the last thing needed to make it feel truly complete.

[ljharb]

If there's a solution that can be added to the docs, great! Please submit a PR.

If there's a solution that requires changes to this library, please submit a PR (ideally after some discussion here).

[nitish-arora]

I did it by re-rendering the calendar again by passing different key to the component on date change. I was able to do in this way not an optimal solution but not able to find other one.

…

On Thu, 27 Jan 2022 at 1:23 AM, Dehn Hunsworth ***@***.***> wrote: Also curious if anyone has found a solution for this. Not a deal breaker as this is the best (most customizable) date picker I have found, but this would be the last thing needed to make it feel truly complete. — Reply to this email directly, view it on GitHub <#1845 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKZQ7WMJHRZDGDEQ7MMYGTTUYBGLTANCNFSM4JDNSSMA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[angenue]

setting an activeStartDate worked for me