React-datepicker: After update from version 0.40.0 calendar not update selected date

Created on 26 Apr 2017  路  12Comments  路  Source: Hacker0x01/react-datepicker

Calendar display old selected date if i put new selected prop to calendar.

<DatePicker
        ref={this.onDatePickerRef}
        openToDate={this.state.openDate}
        onMonthChange={this.onMonthChange}
        customInput={<SelectedDate/>}
        popoverTargetOffset='0 0'
        dateFormat={isSelectedCurrentYear ? DATE_FORMAT_FOR_CURRENT_YEAR : DATE_FORMAT}
        dateFormatCalendar='MMMM'
        {...this.props}
        selected={this.state.selectedDate}
        onChange={this.onSelectedDateChange}
        filter={this.datesFilter}
        forceShowMonthNavigation={true}
      >
        <YearsSelector onChange={this.onYearChange} year={this.state.openDate.year()}/>
      </DatePicker>

prev selected date 01 april
image

prev selected date 30 april
image

How you seen. On filter prop calendar reacts and disable days

bug

Most helpful comment

We are seeing something similar in our application.

Perform a click anywhere else on the page will cause the calendar to update correctly.

Steps to reproduce:

  • Go to the inline example
  • Select a any date on the calendar
  • Navigate a few months into the future
  • Select another date

Expect:
The future date is selected and highlighted

Actual:
The calendar switches back to the old date ( but does not highlight it ). Clicking on a different date after this point will only toggle between the last two dates.

Workaround:

Calling setOpen after the component has been rendered seems to correctly select the date.
This is also happening in the onClickOutside handler, which explains why clicking anywhere else fixes the issue.

<DatePicker inline={true} ref={r => r && r.setOpen(false)} selected={selectedDate} />

All 12 comments

We are seeing something similar in our application.

Perform a click anywhere else on the page will cause the calendar to update correctly.

Steps to reproduce:

  • Go to the inline example
  • Select a any date on the calendar
  • Navigate a few months into the future
  • Select another date

Expect:
The future date is selected and highlighted

Actual:
The calendar switches back to the old date ( but does not highlight it ). Clicking on a different date after this point will only toggle between the last two dates.

Workaround:

Calling setOpen after the component has been rendered seems to correctly select the date.
This is also happening in the onClickOutside handler, which explains why clicking anywhere else fixes the issue.

<DatePicker inline={true} ref={r => r && r.setOpen(false)} selected={selectedDate} />

@JorgenEvens Thanx, you saved my life! 馃槂

OpenToDate property always take precedence over selected value. Does not specify openToDate

The calendar switches back to the old date

it's a normal behaviour, calendar will scroll to openToDate

@alex-shamshurin I'm using 'inline' option, OpenToDate shouldn't even be considered

if so, do not use it, otherwise it will be scrolled to openToDate value.

@alex-shamshurin So what you are suggesting is that the behaviour on the inline example is intended behaviour?

To be clear I was literally using the component as specified earlier (<DatePicker inline={true} selected={selectedDate} />), not setting openToDate to any value at all when I ran into this issue.

If this is intended I think that the example should be fixed and the documentation should clearly state how inline should be used, because at this point even your explanation confuses me on the purpose of openToDate in the context of an inline calendar.

@JorgenEvens So what is wrong with the inline example? Could you provide more info, please?

@alex-shamshurin I've added steps to reproduce in the second comment of this thread.

Yes, I see this. This will be fixed

@alex-shamshurin the problem is described by @AntonovAv - after clicking on the switch month arrow, selecting date works as some kinda 'stack' and takes value I ckicked 2 steps ago, for example.

Is this still an issue?

Should be fixed now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

formigone picture formigone  路  3Comments

dhruvparmar372 picture dhruvparmar372  路  3Comments

evolve2k picture evolve2k  路  3Comments

jcabrerazuniga picture jcabrerazuniga  路  3Comments

sarav1234 picture sarav1234  路  3Comments