Javascript HTML 5 input type="date" 在 Firefox 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30503195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:17:29  来源:igfitidea点击:

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

javascripthtmlfirefoxfeature-detection

提问by Aditi

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

我正在使用 HTML5 <input type="date" />,它在 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 中工作?

回答by Andrea Ligios

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

编辑:从Firefox 57,<input type="date"/>部分支持



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

Firefox尚不支持 HTML5<input type="date"/>

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).
  • 始终使用 Javascript 日期时间选择器,或
  • 检查浏览器是否支持该标签,如果是,则使用它,如果不是,则回退到 javascript 日期选择器(jQuery 或其他一些)。

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

这称为Feature DetectionModernizr是最流行的库。

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 日期选择器,并且根本不需要 javascript。它是面向未来的,这在移动浏览中尤其重要,因为 javascript 日期选择器几乎无法使用。

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

这是一个启动示例,可以<input type="date"/>自动在每个页面的每个元素上执行此操作:

<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,但是您可以自由地用 vanilla javascript 替换 jQuery 部分,用您选择的 javascript datepicker 替换 datepicker 部分。

回答by Massimiliano Arione

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

它现在正在工作。从 Firefox 53 开始,您可以about:config通过启用dom.forms.datetype选项来激活它。请参阅http://caniuse.com/#feat=input-datetimehttps://developer.mozilla.org/en-US/Firefox/Experimental_features

回答by Visakh B Sujathan

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

check the linkfor list of supported events

检查链接以获取支持的事件列表

回答by Mark Lloyd

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

我对各种项目使用 6 个 HTML 选择框,并使用 OPTION 语句来获取正确的值:

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 日)。这是在月份或年份的变化时触发的。

回答by sonam gupta

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.

您使用的是哪个版本的 firefox。Firefox 低于 30 的较低版本将不支持大部分 html5 功能,并且 firefox 不支持 html5 input type="date"。有关更多详细信息,请参阅: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.
  1. firefox 浏览器不提供对 html5 的完全支持,但大多数功能在 30 以上的版本上都受支持。
  2. 更方便的是使用 jquery 或 bootstrap datetimepicker 来选择日期。所有浏览器类型都支持它。