日期输入在 Firefox 中不起作用

Posted 2023-05-07

【中文标题】日期输入在 Firefox 中不起作用

【英文标题】：Date input not working in firefox

【发布时间】：2016-09-15 11:47:48

【问题描述】：

我有以下日期输入：

<div class="form-group">
    <label for="start_date">Start Date</label>
    <input type="date" class="form-control" name="start_date" id="start_date" placeholder="mm/dd/yyyy">
</div>

如果我在 chrome 中点击它，会弹出一个日期选择器：

但是，如果我在 Firefox 中单击它，日期选择器不会弹出 up:

有谁知道为什么会发生这种情况和/或我如何在 Firefox 中修复它以使其保持一致？

注意 - 我正在使用引导程序 3

提前致谢！！

【问题讨论】：

从 2017 年 11 月 14 日发布的 Firefox 版本 57 开始支持它

【参考方案1】：

很遗憾，Firefox 不支持 <input type="date"/>。为了能够在所有浏览器中使用日期类型，您可以使用 Modernizer 进行检查，如果不支持，您可以回退使用 javascript 来显示 datepickerr。

<script>
    $(function()           
        if (!Modernizr.inputtypes.date) 
            $('input[type=date]').datepicker(
                  dateFormat : 'yy-mm-dd'
                
             );
        
    );
</script>

【讨论】：

我该如何使用它？我是 JavaScript 新手。我已将 Modernizr 文件添加到我的项目中。然后在我的 html 文件的顶部，我指向了 js 代码（例如

注意：FireFox 现在支持input type="date"

【参考方案2】：

只需将 FireFox 更新到最新版本 (v57) 这个痛苦的问题就永远消失了 :-)

见 Can I Use

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

证明：

【参考方案3】：

为什么格式在所有浏览器上不一样的根本原因是由于javascript Date() 构造函数在不同浏览器上的实现不同：

alert (new Date ('30/12/2017')) ->

火狐：

“无效日期”

（根据定义可能是正确的）。

IE：

“2019 年 6 月 12 日星期三...”

（现在错了！）

.. 这来自 C/C++ 内部：它将 30 年转换为 2 年（24 个月）+ 6 个月 -> 2019 年 6 月（12 月 + 6 个月）（2017 年 + 2 年）。

基本上，它在所有浏览器上都运行不佳！

您可以更改（或覆盖日期函数）“jquery.validate.js”：

这里是修复。这适用于我的客户：

您还会注意到，对于 IE 等，它通过不允许很多错误日期进行更多检查。

// @987654321@

日期：函数（值，元素）

// test
// alert (new Date('30/12/2017'))

// original - bad
// return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());

// fix
var oInst = $.datepicker._getInst(element)
var sDateFormat = $.datepicker._get(oInst, "dateFormat")
var oSettings = $.datepicker._getFormatConfig(oInst)
var dtDate = null
try 
    dtDate = $.datepicker.parseDate(sDateFormat, value, oSettings)
 catch (ex)  

return this.optional(element) || dtDate != null

,

干杯，Ron Lentjes，LC CLS