Html 日期输入在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37308953/
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
Date input not working in firefox
提问by Trung Tran
I have the following date input:
我有以下日期输入：
<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>
If I click on it in chrome, a date picker pops up:
如果我在 chrome 中点击它，会弹出一个日期选择器：
However, if I click it in firefox, the datepicker does not pop 
up:
但是，如果我在 Firefox 中单击它，则不会弹出日期选择器：
Does anyone know why this is happening and/or how I can fix it in firefox so it is consistent?
有谁知道为什么会发生这种情况和/或我如何在 Firefox 中修复它以使其保持一致？
Note - I am using bootstrap 3
注意 - 我正在使用引导程序 3
Thanks in advance!!
提前致谢！！
回答by riteshmeher
Unfortunately <input type="date"/>is not supported in firefox. To be able to use date type in all browser you can check using modernizer and if not supported you can fall back to use javascript to show the datepickerr.
不幸的<input type="date"/>是，Firefox 不支持。为了能够在所有浏览器中使用日期类型，您可以使用 Modernizer 进行检查，如果不支持，您可以回退到使用 javascript 来显示 datepickerr。
<script>
$(function(){
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({
dateFormat : 'yy-mm-dd'
}
);
}
});
</script>
回答by mumair
Just Update FireFox to latest(v57) this painful issue is gone forever :-)
只需将 FireFox 更新到最新版本(v57)，这个痛苦的问题就永远消失了:-)
SeeCan I Use
查看我可以使用吗
Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
文档：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Proof:
证明：
回答by Ron Lentjes
The root cause of why the format not working the same on all browsers is due to the different implementation of the javascript Date() constructor on different browsers:
格式在所有浏览器上运行不相同的根本原因是由于 javascript Date() 构造函数在不同浏览器上的不同实现：
alert (new Date ('30/12/2017')) ->
Firefox:
火狐：
"Invalid Date"
“失效日期”
(that may be correct depending on definition).
（根据定义，这可能是正确的）。
IE:
IE：
"Wed Jun 12 2019..."
“2019 年 6 月 12 日星期三……”
(now that is wrong!)
（现在错了！）
.. this comes from C/C++ internal: it is converting 30 to 2 years (24 months) + 6 months -> Jun (Dec + 6 months) 2019 (2017 + 2 years).
.. 这来自 C/C++ 内部：它正在将 30 年转换为 2 年（24 个月）+ 6 个月 -> 2019 年 6 月（12 月 + 6 个月）（2017 年 + 2 年）。
Basically, it's working badly on ALL browsers!
基本上，它在所有浏览器上都运行不佳！
You can change (or override date function) "jquery.validate.js":
您可以更改（或覆盖日期函数）“jquery.validate.js”：
Here is the fix. This works for a client of mine:
这是修复。这适用于我的一个客户：
You will also notice that for IE and so on, it does more checking by not allowing many bad dates.
您还会注意到，对于 IE 等，它通过不允许许多错误日期进行更多检查。
// http://docs.jquery.com/Plugins/Validation/Methods/date
// 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
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
},
},
Cheers, Ron Lentjes, LC CLS
干杯，Ron Lentjes，LC CLS
