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

Question

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 1

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.