3

For a mobile html5/js website I would like to leverage native browser date/time pickers when available (like on mobile safari for instance). I know I can detect if the browser supports the date/datetime input types, which will help ensure the proper data format is entered, but is there a proper way to detect if the current browser offers native date and/or time picker?

Romain
  • 1,292
  • 1
  • 10
  • 14

1 Answers1

8

you can create an input element and try to assign the type, if it's not supported the type will switch back to the default type (which is text)

function isDateSupported() {
    var i = document.createElement("input");
    i.setAttribute("type", "date");
    return i.type !== "text";
}

or you can use a tool like modernizr

  • 3
    This can indeed tell you if the input type is supported, but not if there is a native picker for date and time – Romain Oct 23 '12 at 08:12
  • AFAIK if a type is supported it's also implemented the picker –  Oct 23 '12 at 08:16
  • 3
    Some people dispute that: http://stackoverflow.com/questions/13718456/check-if-browser-supports-html5-timepicker?lq=1 – Thilo Apr 21 '13 at 03:28
  • 1
    This doesn't work. If I try to pass "oijfeoid" instead of "date" as the type attribute, the type attribute stays as "oijfeoid" – JakeParis Aug 07 '15 at 19:53
  • 1
    @JakeParis, sorry for the late answer, try this [fiddle](https://jsfiddle.net/s4wg6pf7/) –  Nov 21 '18 at 09:29
  • I tried this in https://hacktivis.me/projects/badwolf (which doesn't use a date/time picker) and it worked correctly returning `false`... And @user757095's test worked in FF (that is, "oijfeoid" being an invalid type returns "text") – groovenectar Aug 27 '21 at 02:47