I am using date inputs in an app, and have noticed that they behave strangely in Microsoft’s Edge browser. Specifically, if I provide a value (in ISO format), then the input element shows that date in ISO format (instead of local format) and never updates it, even if I select a new date. I can see that the
onInput event fires and the model is updated with the new date, but the input element does not update its display. I only see this behavior on Edge. On other browsers, the input formats properly and updates when it should.
Here is an Ellie that demonstrates: https://ellie-app.com/7Yrf8GBhB7Ca1
Upon investigation, is appears that this only happens if I provide a value right from the start. In this modified Ellie, I start by providing a value of “”, and start providing the date in ISO format once one has been selected (instead of having a default starting date): https://ellie-app.com/7YrpcsrWckma1
I do not want to code up or use a custom date picker, as the vast majority of the users are using iOS Safari (where it works fine and the native date picker is pretty good).
Does anyone know why this would work this way? What can I do about this, other than make sure that the input element is always rendered at least once before I have a date value?