Pickadate v5.0.0 Doesn't Work in IE11 (Multiple Issues)

[callaginn]

Issue Summary

IE11 has multiple issues with rendering / activating Pickadate v5.0.0 Alpha 2. I know IE11 sucks by default, but a lot of companies will probably have to support it until the end of time.

This seems to be a three part issue:

1. The official pickadate demo does not render in IE11 at all. Instead, there's a blank space where the datepicker is supposed to be and this message in the console:

   I've found you can get the datepicker to render / activate by adding the following polyfills:

   <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&amp;features=default%2CObject.values%2CNodeList.prototype.forEach%2CArray.prototype.forEach"></script>

2. You can't change the month in any browser. It looks like pickadate triggers a form submission every time any calendar item is clicked. However, if you specify the datepicker's button types, you can change the month:

   document.querySelectorAll('button').forEach(function(el) {
       el.setAttribute("type", "button");
   });

3. Datepicker won't close or change the date in the input field that triggered it. Zero errors show up in the Chrome Console after making the fixes above.

Codepen Test

I've added a test to Codepen to demonstrate the third issue. This test uses Bootstrap, Pickadate v5.0.0 Alpha 2, IE11 polyfills, and some basic init code: https://codepen.io/callaginn/pen/QPdxGO

Note: You'll need to open it in debug mode to view it in IE11.

[callaginn]

Quick Update

It appears the second and third issues might be caused by IE11 not recognizing multiple click events inside the single button element that wraps the calendar days.

Changing the tagName from "button" to "div" in line 878 might fix this issue. I've also found adding more polyfills enables tabbing and using the arrow keys.

Out of time for today, so will test / post results in next few days.

[amsul]

@callaginn thanks for bringing up these issues.

(1) v5 will definitely need some polyfills for lower-end browsers. We should add those to the docs.

(2) This has been resolved in the future branch after this commit: https://github.com/amsul/pickadate.js/commit/70301d2210d030cacc39e5a2175f7cf34ed61e4b

(3) The API has been designed to stay open by default. I think we should probably flip that around.

[callaginn]

First off, I've applied the polyfills, <button> to <div>, and css fixes to v5.0.0-alpha.2 and got something that works flawlessly in IE11. That form can be viewed here: https://gennabennas.com/private-dining

I then pulled down the latest copy of the future branch and created a new bundle. That bundle was added to my latest Codepen test: https://codepen.io/callaginn/pen/pBPMvm https://s.codepen.io/callaginn/debug/pBPMvm/NjrYzqJWZXQA

(1) As far as I can tell, here's the minimal set of polyfills needed for the latest commit: https://polyfill.io/v3/polyfill.min.js?flags=gated&rum=true&features=default%2CObject.values%2CArray.prototype.includes%2CNumber.isFinite%2CNumber.isInteger

(2) Yes, I can confirm this was resolved in the future branch.

(3) You still can't select an individual day in IE11 unless you change the <button> to a <div> in the source code. However, it's now not closing the datepicker or changing the input. It appears something changed between v5.0.0-alpha.2 (edd2a8f) and commit 0f971e8 that broke some of those IE11 fixes.

I will need to test more, but I believe the fix I made to the official release works: https://gennabennas.com/assets/src/js/pickadate@5.0.0-alpha.2.js

but the fix I made to commit 0f971e8 does not work: https://ginn.io/pickadate-v5@0f971e8-index.js

[DanielRuf]

Sounds like we need a git bisect here.