javascript - HTML 5 input type=“date” not working in Firefox

Question

I am using HTML5 <input type="date" />, which works fine in Chrome and I get the calendar popup to select the date.

But in firefox it acts like a text box and no calendar pops up.

After doing few research I see few solutions using webshims, modenizr, etc... but I do not want to use jQuery.

Is there an alternative for this? How can I make it work in Firefox ?

Answer 1

EDIT: from Firefox 57, <input type="date"/> is partially supported.

---

Firefox doesn't support HTML5's <input type="date"/> yet.

You have two options:

• always use a Javascript datetime picker, or
• check if the browser is supporting that tag, if yes use it, if no then fallback on a javascript datepicker (jQuery or some other one).

This is called Feature Detection, and Modernizr is the most popular library for this.

Using always a javascript datepicker is easier and faster but it won't work with javascript disabled (who cares), it will work very bad on mobile (this is important) and it will smell of old.

Using the hybrid approach instead will let you cover every case now, up to the day when every browser will support the HTML5 datepicker, in a standardized way and without needing javascript at all. It is future-proof, and this is especially important in mobile browsing, where the javascript datepickers are almost unusable.

This is a kick off example to do that on every <input type="date"/> element of every page automatically:

<script>
    $(function(){           
        if (!Modernizr.inputtypes.date) {
        // If not native HTML5 support, fallback to jQuery datePicker
            $('input[type=date]').datepicker({
                // Consistent format with the HTML5 picker
                    dateFormat : 'yy-mm-dd'
                },
                // Localization
                $.datepicker.regional['it']
            );
        }
    });
</script>

It uses jQuery because I use jQuery, but you are free to substitute the jQuery parts with vanilla javascript, and the datepicker part with a javascript datepicker of your choice.