Check if Browser Supports HTML5 timepicker

Question

I built a time mask in JavaScript which works great for PC's, Macs, iPhones, and iPads, but doesn't work consistently in most Android phones (I'd prefer not to get into the details of why this functionality can't work consistently in Android) so I disable it. For Samsung the built-in HTML5 time picker works great.

For Android phones I would like to leverage the HTML5 time pickers, when native browser time pickers are available (like for modern Samsung phones).

I know I can detect if the browser supports the date/datetime input types, but that doesn't necessarily indicate that the browser supports a time picker (For anyone who doubts this test it with an HTC EVO 3D, as just one example.) This Question ( Detect browser's native date/time pickers ) indicates that the if the time type is supported then the browser has implemented a time picker, but this is wrong.

I'm aware of modernizr but I don't see a way to actually verify if the browser supports a timepicker.

So with that background information. Does anyone know of a way to determine if the browser has implemented a time picker?

Answer 1

Your best bet would be to assume that browsers that support a <input type="date"> have also implemented a time-picker for it.
(As far as I know, this is the case, what point would there be in supporting type="date", if it didn't have a reasonable way to input the date?)

This is because there's no way to check if the browser actually shows a timepicker. Aside from the modernizr checks, there's really nothing you can do.

Answer 2

I would argue that the safest bet is actually to assume that <input type="date"> is unsupported. As of today (early 2016), the actual UI for the date picker is still very inconsistent across browsers. Unless you're developing for a very concrete subset of browsers you are going to need some JavaScript anyway.

References:

• http://html5doctor.com/the-woes-of-date-input
• http://caniuse.com/#feat=input-datetime