Handling browser-specific support of HTML input type="date"

Question

I am aware that the HTML 5 input tag, when used with type="date", needs to be fed an RFC 3339 full date as described here. Lots of questions here, such as this one, mention this.

However, browser support for the date type input tag varies a lot. For example, Safari on iOS 7 uses a nice date picker on which you can flip up and down to select day, month and year separately. Internet Explorer 10, on the other hand, does not handle date type input tags in any special way, treating them as plain text input tags.

When we put these two facts together, we find the following. If I feed the date type input tag on my page a properly-formatted RFC 3339 full date, as expected, it displays it nicely in browsers that have special support for it, such as Safari on iOS 7. However, the input tag shows an ugly and user-unfriendly yyyy-mm-dd date on browsers that don't handle it in any special way, such as Internet Explorer 10. I can't afford to show yyyy-mm-dd dates to my users, so I thought that I would rather feed my input tags user-friendly formatted dates, such as dd/MMM/yyyy (that's the format we use over here). But then, this works OK on browsers that handle it as simple text, like Internet Explorer; on Safari on iOS 7, which expects a proper RFC 3339 full date, the date type input tag appears blank.

So I am stuck. I guess I need a way to manually handle browse support individually, and programmatically format my dates according to what browser the client is using. My questions are these:

• Do I really need to do that, or is there a workaround?
• If I need to do that, can you please suggest a simple approach? I am using ASP.NET, C# and Bootstrap 3.

I would rather avoid introducing additional frameworks such as modernizr just to solve this problem. I can always go back to using plain text tags if this is too difficult or cumbersome to fix.

Thank you.

Answer 1

See this. It recommends 2 polyfills. This one and this one. Both look pretty good. Doing browser detection then special formatting is messy, so I don't recommend it.