question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SingleDatePicker date selection in IE 11 doesnt work

See original GitHub issue

react-dates version react-dates@20.1.0

Describe the bug Use the SingleDatePicker in your project, build and open the app on IE11 attempt to select (with mouse) the date, notice that calendar opens and then closes but onDateChanged is not called.

Do the same with the storybook example notice the same result

Source code (including props configuration) Steps to reproduce the behavior:

      <SingleDatePicker
        id={this.props.id}
        date={date}
        focused={focused}
        onDateChange={updatedDate => this.onDateChange(updatedDate)}
        onFocusChange={updatedFocused => this.onFocusChange(updatedFocused)}
        displayFormat="ll"
        isOutsideRange={this.isOutsideRangeHandler}
        numberOfMonths={1}
        renderMonthElement={this.renderMonthElement}
      />

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser IE
  • Version 11.706.17134.0

Is the issue reproducible in Storybook? Yes

http://airbnb.io/react-dates/?selectedKind=SingleDatePicker (SDP)&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel

Additional context You can navigate with keyboard and select the date - then the onDateChange is invoked

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
LukaszGrelacommented, May 10, 2019

As an additional info the 18.4.0 works fine.

1reaction
svvbcommented, Jun 18, 2019

Actually as @ljharb mentioned in one of other posts related to this issue, it is fixed in v20.2.0, and you can check this out by pulling the project and starting storybook. The reason I was unable to make it work in our project was because react-dates is used in a library that we created and are pulling from npm, and while testing locally, I was not careful enough and didn’t replace react-dates in node-modules folder inside our libraries folder inside main node-modules (if that makes sence) after installing newest version of react-dates in the main project folder. If done correctly, everything’s working just fine.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SingleDatePicker date selection in IE 11 doesnt work #1639
Use the SingleDatePicker in your project, build and open the app on IE11 attempt to select (with mouse) the date, notice that calendar...
Read more >
MVC 4 - Datepicker doesn't work in IE 11 browsers - MSDN
I am new to MVC 4, I have started with basic example and application is working fine, My query is DatePicker doesn't work...
Read more >
Datepicker issue in IE11 - jquery - Stack Overflow
We are using a jQuery datepicker which is working fine in Chrome and Firefox but we are having issues with IE11, specifically this...
Read more >
react-date-picker - npm
Prop name Description Default value autoFocus Automatically focuses the input on mount. n/a calendarAriaLabel aria‑label for the calendar button. n/a clearAriaLabel aria‑label for the clear button....
Read more >
Date Range Picker — JavaScript Date & Time Picker Library
Hi i'm using this as a single date picker, works great. I'm able to set the mindate and maxdate to grey out unavailable...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found