如何让 HTML 5 input type="date" 在 Firefox 和/或 IE 10 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22983013/
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
How to get HTML 5 input type="date" working in Firefox and/or IE 10
提问by Solomon Closson
I find it odd that input type="date"is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...
我觉得很奇怪，input type="date"在这么长时间之后，Firefox 仍然不支持。事实上，我不认为他们在输入元素上添加了很多（如果有的话）HTML 5 新类型。IE10 不支持它并不奇怪。所以，我的问题是...
How to get type="date"on an inputelement working without adding, yet another, .js file (namely jQueryUIDatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.
如何type="date"在input不添加另一个 .js 文件（即jQueryUIDatePicker 小部件）的情况下让元素工作，只是为了获取仅适用于 IE 和 Firefox 浏览器的日历/日期？有没有什么东西可以应用在某个地方（也许是 CDN？），可以让这个功能在 Firefox 和/或 IE 浏览器中默认工作？尝试针对 IE 8+ 浏览器和 Firefox，没关系，最新版本 (28.0) 就可以了。
UPDATE: Firefox 57+ supports input type=date
更新：Firefox 57+ 支持输入类型=日期
回答by alexander farkas
You can try webshims, which is available on cdn+ only loads the polyfill, if it is needed.
您可以尝试webshims，它在cdn+上可用，仅在需要时加载polyfill。
Here is a demo with CDN: http://jsfiddle.net/trixta/BMEc9/
这是 CDN 的演示：http: //jsfiddle.net/trixta/BMEc9/
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
<input type="date" />
In case the default configuration does not satisfy, there are many ways to configureit. Here you find the datepicker configurator.
如果默认配置不满足，可以通过多种方式进行配置。在这里您可以找到日期选择器配置器。
Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.
注意：虽然将来可能会有针对 webshim 的新错误修复版本。不会再有大版本了。这包括对 jQuery 3.0 或任何新功能的支持。
回答by Jonathan Vanasse
It is in Firefox since version 51 (January 26, 2017), but it is not activated by default (yet)
自版本 51（2017 年 1 月 26 日）起，它就在 Firefox 中，但默认情况下（尚未）激活
To activate it:
要激活它：
about:config
关于：配置
dom.forms.datetime-> set to true
dom.forms.datetime-> 设置为 true
https://developer.mozilla.org/en-US/Firefox/Experimental_features
https://developer.mozilla.org/en-US/Firefox/Experimental_features
回答by Dax
There's a simple way to get rid of this restriction by using the datePickercomponent provided by jQuery.
通过使用jQuery 提供的datePicker组件，有一种简单的方法可以摆脱这种限制。
Include jQuery and jQuery UI libraries (I'm still using an old one)
- src="js/jquery-1.7.2.js"
- src="js/jquery-ui-1.7.2.js"
Use the following snip
$(function() { $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); });
包括 jQuery 和 jQuery UI 库（我仍在使用旧的）
- src="js/jquery-1.7.2.js"
- src="js/jquery-ui-1.7.2.js"
使用以下剪辑
$(function() { $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); });
See jQuery UI DatePicker - Change Date Formatif needed.
如果需要，请参阅jQuery UI DatePicker - 更改日期格式。
回答by Chris Love
The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.
type="date" 在这一点上不是一个实际的规范。这是谷歌提出的一个概念，在他们的 whatwg 规范（非官方）中，Chrome 仅部分支持。
http://caniuse.com/#search=date
http://caniuse.com/#search=date
I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?
在这一点上，我不会依赖这种输入类型。拥有它会很好，但我不认为这会真正做到。#1 的原因是它给浏览器带来了太多的负担来为有点复杂的输入确定最佳 UI。从响应的角度考虑一下，供应商如何知道在 400 像素、800 像素和 1200 像素宽的情况下什么最适合您的 UI？
回答by drooh
Here is a full example with the date formatted in YYYY-MM-DD
这是一个完整的示例，日期格式为 YYYY-MM-DD
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
dFormat: '-',
dateSigns: '-',
patterns: {
d: "yy-mm-dd"
}
}
};
</script>
<input type="date" />
回答by ajax1515
While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:
虽然这不允许您获得日期选择器 ui，但 Mozilla 确实允许使用模式，因此您至少可以使用以下内容进行日期验证：
pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'
Ultimately I agree with @SuperUberDuper in that Mozilla is way behind on including this natively.
最终，我同意 @SuperUberDuper 的观点，因为 Mozilla 在本机包含此功能方面落后了很多。
回答by irfandar
回答by codeispoetry
This is just a suggestion that follows Dax's answer. (I would put it in a comment at that answer, but I don't have enough reputation yet to comment on others questions).
这只是遵循 Dax 回答的建议。（我会把它放在那个答案的评论中，但我还没有足够的声誉来评论其他问题）。
Id's should be unique for every field, so, if you have multiple date fields in your form (or forms), you could use the class element instead of the ID:
每个字段的 ID 应该是唯一的，因此，如果您的表单（或多个表单）中有多个日期字段，您可以使用 class 元素而不是 ID：
$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
and your input as:
和您的输入为：
<input type="text" class="datepicker" name="your-name" />
Now, every time you need the date picker, just add that class. PS I know, you still have to use the js :(, but at least you're set for all your site. My 2 cents...
现在，每次您需要日期选择器时，只需添加该类。PS 我知道，您仍然必须使用 js :(，但至少您已为所有网站设置好。我的 2 美分...
回答by Pavel Niedoba
Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)
谢谢亚历山大，我找到了一种如何修改 en lang 格式的方法。（不知道哪个lang使用这种格式）
$.webshims.formcfg = {
en: {
dFormat: '/',
dateSigns: '/',
patterns: {
d: "yy/mm/dd"
}
}
};
$.webshims.activeLang('en');
回答by santosh devnath
Here is the proper solution. You should use jquery datepicker everywhere
这是正确的解决方案。你应该到处使用 jquery datepicker
<script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>
Below is the link to get the complete code
以下是获取完整代码的链接
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker
