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

html, javascript, jquery, jquery-ui

Solution

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.

Problem

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.

Original source

Related problems