Conflicts with form validation in IE 11

[vfaronov]

<script src="nodep-date-input-polyfill.dist.js"></script>
<form>
  <input type=date required id=x>
  <button type=button
    onclick="alert(document.getElementById('x').checkValidity())">Submit</button>
</form>

In IE 11, when I pick a date using the polyfill’s picker and click Submit, I get “false”.

If I type something manually into the input and click Submit, I get “true”.

In Firefox, I get “true”.

It seems like IE’s constraint validation doesn’t care if you set the value attribute, only if you set the value property, which the polyfill overrides.

[brianblakely]

Hm, the value property matches the spec. Is it possible that IE's validation doesn't respect programmatic values, only user-typed values?

[vfaronov]

@brianblakely It seems like IE’s constraint validation doesn’t care if you set the value attribute, only if you set the value property, which the polyfill overrides.

[brianblakely]

The polyfill sets both the attribute and the property. The property is populated with an ISO date, in accordance with the spec. Does IE expect to see the localized value, which is given to the attribute? If that is the case, then it is an IE bug.

[vfaronov]

@brianblakely I’m not sure (not good at JS) but I don’t think the polyfill sets the native value property? Instead it replaces it with its own value property.

The jcgertig/date-input-polyfill doesn’t seem to do that, and doesn’t suffer from this problem.

then it is an IE bug

Well, I would not be surprised if the underlying cause were some IE bug. That bug is not getting fixed, though.

[brianblakely]

So there is a wrinkle here. I went to test this for myself, and it actually worked correctly. When the element is blank, checkValidity returns false, but when a value is selected via picker, it returns true.

If possible, would you be able to create a CodePen or something that demonstrates the issue for you?

[vfaronov]

@brianblakely http://vasiliy.faronov.name/nodep-date-input-polyfill-issue53/
Click the field, pick a date, click Submit. You should see an alert saying “true”. But in IE 11, I see an alert saying “false”.

[brianblakely]

It's rather bizarre, what I have been able to find is that this bug seemingly only manifests when the field is wrapped in a <form>.

The official demo doesn't use that tag, so that is why it works in IE11.

[vfaronov]

I think HTML constraint validation operates on forms and form inputs, not some random inputs. So this doesn’t seem too bizarre to me.

[brianblakely]

It actually does work with any input element.

[martinduparc]

Am I wrong thinking that not setting the value would solve the problem?

It is what there are doing on https://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html

Edit: I also noticed that the value is set in the wrong format (08/15/2018 vs the correct 2018-08-15). FWIW, https://github.com/jcgertig/date-input-polyfill works