HTML 5 input type="date" 在 Firefox 中不起作用 [英] HTML 5 input type=“date” not working in Firefox

问题描述

我正在使用 HTML5 <input type="date"/>，它在 Chrome 中运行良好，并且我使用日历弹出窗口来选择日期.

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

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

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

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

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

有没有其他选择?我怎样才能让它在 Firefox 中工作?

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

推荐答案

EDIT:从 Firefox 57 开始， 是 部分支持.

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

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

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

您有两个选择:

• 始终使用 Javascript 日期时间选择器，或
• 检查浏览器是否支持该标签，如果是，则使用它，如果不是，则回退到 javascript 日期选择器(jQuery 或其他一些).

这称为特征检测，以及Modernizr 是最流行的库.

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

始终使用 javascript 日期选择器更容易、更快捷，但它不会在禁用 javascript 的情况下工作(谁在乎)，它在移动设备上工作得非常糟糕(这一点很重要)，而且会有旧的味道.

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.

改用混合方法可以让您现在涵盖所有情况，直到每个浏览器都以标准化的方式支持 HTML5 日期选择器并且完全不需要 JavaScript.它是面向未来的，并且这在移动浏览中尤为重要，因为 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.

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

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>

它使用 jQuery，因为我使用 jQuery，但您可以自由地用 vanilla javascript 替换 jQuery 部分，用您选择的 javascript datepicker 替换 datepicker 部分.

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.

这篇关于HTML 5 input type="date" 在 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！