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 ?

Fumy

that totally depends on the browser version..Check this – Arteriovenous

Possible duplicate of How to get HTML 5 input type="date" working in Firefox and/or IE 10 – Disavowal

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.

Dottydoty

A great and simple way to handle older and non-supportive browsers! +1 – Rabjohn

Sorry this question is coming at this time, but how do you call this javascript function from your html code?? – Finer

Pur that script in a common fragment imported in every page, you should have some... – Dottydoty

Answer 2

It's now working. Since Firefox 53, you can activate it in about:config by enabling dom.forms.datetype option. See http://caniuse.com/#feat=input-datetime and https://developer.mozilla.org/en-US/Firefox/Experimental_features

Sihonn

I cannot go to every user personally and give them instructions to enable that option from about:config – Pyrrhotite

@Pyrrhotite no need for instructions, the support was enabled by default since ages – Sihonn

Answer 3

`input type="date"` is not supported on mozilla

check the link for list of supported events

Ent

Answer 4

I use 6 HTML selectboxes, for the various items, with OPTION statements for the proper values:

year 2000-2050 (or whatever range you choose) month 1-12 (you can have it show month names) day 1-31 hour 0-23 (or use 12 midnight - 11 PM, this just changes the display) minute 0-59 second 0-59 (or just assume 0)

No Javascript needed, although I do use some to avoid invalid selections (like February 30). This is triggered on change of month or year.

Tirrell

Answer 5

What version of firefox you are using.Firefox lower versions less than 30 will not support most of html5 features and html5 input type="date" is not supported on firefox. For more details please refer:http://caniuse.com/#feat=input-datetime.

1. The firefox browser doesn't provide full support for html5 but most of the features are supported on versions above 30.
2. The more convenient was is to use the jquery or bootstrap datetimepicker for selecting date.It will be supported on all browser types.

Aldas

False. I have Firefox 38, and it does not support input type dates. – Dottydoty

Have you opened that link ? Firefox is completely red. Red means it isn't supporting it. – Dottydoty

Second confirmation: Firefox 38 does not support this input type as "date" – Yuzik

Its written that firefox does not support input type="date" below in my answer – Aldas