How to get HTML 5 input type=“date” working in Fir

Question

I find it odd that input type="date" is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...

How to get type="date" on an input element working without adding, yet another, .js file (namely jQueryUI DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.

UPDATE: Firefox 57+ supports input type=date

Answer 1

While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Ultimately I agree with @SuperUberDuper in that Mozilla is way behind on including this natively.

Answer 2

Here is the perfect solution. You should use JQuery datepicker to user input date. It is very easy to use and it have lot of features that HTML input date don't have.

Click here to copy the JQuery datepicker code

Answer 3

I had to use bootstrap-datepicker plugin to get the calendar working on Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Compatible with Bootstrap v2 and v3. It comes with a standalone stylesheet so you don't have to depend on Bootstrap.

Usage:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

Answer 4

Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

Answer 5

The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.

http://caniuse.com/#search=date

I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?

Answer 6

Here is a full example with the date formatted in YYYY-MM-DD

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />