如何在Firefox和/或IE 10中使用HTML 5输入类型="日期"

Question

我觉得奇怪的input type="date"是,在所有这段时间后仍然不支持Firefox.实际上,我不认为他们在输入元素上添加了很多(如果有的话)HTML 5新类型.IE10不支持它并不奇怪.所以,我的问题是......

如何type="date"使用一个input元素工作而不添加另一个.js文件(即jQueryUIDatePicker Widget)只是为了获取IE和Firefox浏览器的日历/日期？有什么东西可以应用到某个地方(可能是CDN？),这将使这个功能在Firefox和/或IE浏览器中默认工作？尝试针对IE 8+浏览器和Firefox,没关系,最新版本(28.0)会没问题.

更新:Firefox 57+支持输入类型=日期

Answer 1

你可以尝试webshims,这是可以的CDN +仅加载填充工具,如果需要的话.

这是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" />

如果默认配置不满足,则有许多方法可以配置它.在这里,您可以找到datepicker配置器.

注意:虽然将来可能会有针对webshim的新错误修复版本.将不会有任何重大发布.这包括对jQuery 3.0或任何新功能的支持.

Answer 2

自版本51(2017年1月26日)起它在Firefox中,但默认情况下不会激活(尚未启动)

要激活它:

about:config中

dom.forms.datetime - >设置为true

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Answer 3

通过使用jQuery提供的datePicker组件,有一种简单的方法来摆脱这种限制.

1. 包括jQuery和jQuery UI库(我还在使用旧库)

   • SRC = "JS/jQuery的1.7.2.js"
   • SRC = "JS/jquery的-UI-1.7.2.js"

2. 使用以下剪辑

   $(function() {
        $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
   });
   

如果需要,请参阅jQuery UI DatePicker - 更改日期格式.

Answer 4

此时type ="date"不是实际规范.这是谷歌提出的一个概念,并且符合他们的规范(非官方),并且只有部分Chrome支持.

http://caniuse.com/#search=date

此时我不会依赖此输入类型.这将是很好的,但我不预见这个实际上是这样做的.第一个原因是它给浏览器带来了太多负担,以确定一个有点复杂的输入的最佳UI.从响应的角度考虑一下,任何供应商如何知道什么最适合您的UI,如400像素,800像素和1200像素宽？

Answer 5

这是一个完整的示例,其日期格式为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" />