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

问题

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 ?

回答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.

回答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

回答3:

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

check the link for list of supported events

回答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.

回答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.

来源：https://stackoverflow.com/questions/30503195/html-5-input-type-date-not-working-in-firefox