How to make <input type="date"> supported on all browsers? Any alternatives?

javascript jquery html jquery-ui
leonardeveloper picture leonardeveloper · Aug 2, 2013 · Viewed 178.2k times · Source

I'm working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes. I tried Modernizr but I can't understand on how to integrate it on my website(on how to code it/what is the syntax/includes). Any code snippet there on how to work with date, time attributes to all browsers.

Answer

adeneo picture adeneo · Aug 2, 2013

Any browser that does not support the input type date will default to the standard type, which is text, so all you have to do is check the type property (not the attribute), if it's not date, the date input is not supported by the browser, and you add your own datepicker:

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

FIDDLE

You can of course use any datepicker you want, jQuery UI's datepicker is probably the one most commonly used, but it does add quite a bit of javascript if you're not using the UI library for anything else, but there are hundreds of alternative datepickers to choose from.

The type attribute never changes, the browser will only fall back to the default text type for the property, so one has to check the property.
The attribute can still be used as a selector, as in the example above.

Related questions

Can I make a <button> not submit a form?

I've got a form, with 2 buttons <a href="index.html"><button>Cancel changes</button></a> <button type="submit">Submit</button> I use jQuery UI's button on them too, …

Read More
Using jQuery how to get click coordinates on the target element

I have the following event handler for my html element jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); I need to find the position of the mouse on the #seek-bar at the time …

Read More
jQuery UI accordion that keeps multiple sections open?

I may be an idiot, but how do you keep multiple sections in jQuery UI's accordion open? The demos all have only one open at a time... I'm looking for a collapseable menu type system.

Read More