HTML 5输入类型= "日期"在Firefox中不工作

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

我正在使用HTML5 ，它在Chrome中运行良好，我将弹出日历选择日期。

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

但在firefox中，它就像一个文本框，没有日历弹出。

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

在做了很少的研究之后，我发现使用webshims、modenizr等的解决方案很少。但我不想使用jQuery。

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

还有其他的选择吗?我如何让它在Firefox中工作?

5 个解决方案

#1

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

编辑:从Firefox 57中，得到部分支持。

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

Firefox还不支持HTML5的。

You have two options:

你有两个选择:

always use a Javascript datetime picker, or
始终使用Javascript datetime picker
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).
检查浏览器是否支持该标记，如果使用，如果不使用，则返回到javascript datepicker (jQuery或其他工具)。

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

这被称为特征检测，现代化zr是最受欢迎的图书馆。

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.

始终使用javascript datepicker会更容易、更快，但它不会禁用javascript(谁管它呢)，它在移动端会很糟糕(这很重要)，而且闻起来很旧。

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.

相反，使用混合方法可以让您现在就覆盖所有情况，直到每个浏览器都支持HTML5 datepicker，以一种标准化的方式，完全不需要javascript。它是未来的，这在移动浏览中尤其重要，在移动浏览中，javascript数据表几乎不可用。

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.

它使用jQuery是因为我使用jQuery，但是您可以*地用普通的javascript替换jQuery部分，使用您选择的javascript datepicker部分。

#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

现在工作。从Firefox 53开始，您可以通过启用dom.form来激活它。datetype选项。看到http://caniuse.com/壮举= input-datetime和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:

对于不同的项目，我使用了6个HTML选择框，对正确的值使用了选项语句:

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)

2000-2050年(或任何你选择的范围)1-12月(你可以让它显示月份名称)1-31小时0-23(或者使用12点午夜- 11点，这只是改变了显示)0-59秒0-59(或者假设是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.

不需要Javascript，尽管我确实使用了一些来避免无效的选择(比如2月30日)。这是在月份或年份变化时触发的。

#5

-2

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.

你使用的是什么版本的火狐浏览器?小于30的Firefox版本不支持大部分html5特性，而html5输入类型="date"不支持Firefox。更多细节请参考:http://caniuse.com/#feat=input-datetime。

The firefox browser doesn't provide full support for html5 but most of the features are supported on versions above 30.
firefox浏览器并不完全支持html5，但是大多数特性都支持30以上的版本。
The more convenient was is to use the jquery or bootstrap datetimepicker for selecting date.It will be supported on all browser types.
更方便的方法是使用jquery或bootstrap datetimepicker来选择日期。它将支持所有浏览器类型。

#1