Question

我有以下日期输入：

<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中单击它，则datepicker不会弹出：

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

注意 - 我正在使用bootstrap 3

提前致谢!!

Answer 1

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

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

Answer 2

对此类功能的浏览器支持差别很大。目前，Firefox和其他几种浏览器不支持将<input type='date' />元素用作mentioned here，如下图所示：

考虑使用基于Javascript的替代方案

您可能会考虑使用基于Javascript的插件（例如jQueryUI's DatePicker）来定位该类型的任何元素，并让它以更加跨浏览器的方式接管：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(function(){
         // Find any date inputs and override their functionality
         $('input[type="date"]').datepicker();
    });
</script>

此外，您还可以考虑查看特定于Bootstrap的插件，例如bootstrap-datepicker，这可能会为您提供更加一致的外观。

Answer 3

只需将FireFox更新为最新（v57）这个痛苦的问题永远消失了： - ）

参见 Can I Use

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

<强>证明：

Answer 4

在所有浏览器上格式不一致的根本原因是由于不同浏览器上javascript Date（）构造函数的不同实现：

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

Firefox：

＆＃34;无效日期＆＃34;

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

IE：

＆＃34; 2019年6月12日星期三...＆＃34;

（现在这是错误的！）

..这来自C / C ++内部：它正在转换30到2年（24个月）+ 6个月 - ＆gt; Jun（12月+ 6个月）2019（2017 + 2年）。

基本上，它在所有浏览器上工作都很糟糕！

您可以更改（或覆盖日期功能）＆＃34; jquery.validate.js＆＃34;：

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

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

// http://docs.jquery.com/Plugins/Validation/Methods/date



date: function (value, element) {

// 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

// 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

日期输入在Firefox中不起作用

4 个答案: