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

Question

我正在使用HTML5 <input type="date" />,它在Chrome中运行良好,我可以通过日历弹出窗口选择日期.

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

经过一些研究后,我看到很少使用webshims,modenizr等解决方案...但我不想使用jQuery.

有替代方案吗？如何让它在Firefox中运行？

Answer 1

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

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

您有两种选择:

• 总是使用Javascript日期时间选择器,或
• 检查浏览器是否支持该标记,如果是,则使用它,如果没有,则返回javascript datepicker(jQuery或其他一些).

这称为特征检测,而Modernizr是最受欢迎的库.

总是使用javascript datepicker更容易,更快,但它不适用于禁用javascript(谁在乎),它会在移动设备上工作非常糟糕(这很重要),它会闻起来很旧.

使用混合方法可以让您现在涵盖每个案例,直到每个浏览器都支持HTML5日期选择器的那一天,以标准化的方式完全不需要javascript.它具有前瞻性,在移动浏览中尤为重要,因为javascript日期选择器几乎无法使用.

这是一个启动示例,可以<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>

它使用jQuery,因为我使用jQuery,但您可以使用vanilla javascript替换jQuery部分,并使用您选择的javascript datepicker替换datepicker部分.

Answer 2

您使用的是哪个版本的 Firefox。低于 30 的 Firefox 版本将不支持大多数 html5 功能，并且 Firefox 不支持 html5 input type="date"。有关更多详细信息，请参阅： http: //caniuse.com/#feat=input-datetime。

1. firefox浏览器不提供对html5的完全支持，但大多数功能在30以上的版本上都支持。
2. 更方便的是使用 jquery 或 bootstrap datetimepicker 来选择日期。所有浏览器类型都支持它。