如何获取在Firefox和/或IE 10中工作的HTML 5 input type =“date”

我觉得奇怪的是, input type="date"仍然不支持在Firefox这一次。 实际上,我不认为他们在input元素上添加了很多HTML5新types(如果有的话)。 并不奇怪,它不支持IE10。 所以,我的问题是…

如何获取input元素上的type="date"而不添加另一个.js文件(即jQueryUI DatePicker Widget)只是为了获取IE和Firefox浏览器的日历/date? 有没有什么可以应用在某个地方(CDN也许?),这将使这个function默认在Firefox和/或IE浏览器? 试图针对IE 8 +浏览器和火狐,没关系,最新版本(28.0)将罚款。

更新:Firefox 57 +支持inputtypes=date

你可以尝试webshims ,这是可用的cdn +只加载polyfill ,如果需要的话。

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

如果默认configuration不满足,有很多方法可以configuration它。 在这里你可以finddatepickerconfiguration器 。

注意:虽然将来可能会有新的针对webshim的bug修正版本。 将不会有任何重大的发布。 这包括对jQuery 3.0或任何新function的支持。

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

激活它:

about:config中

dom.forms.datetime – >设置为true

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

有一个简单的方法可以通过使用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 -如果需要更改date格式 。

types=“date”在这一点上不是一个实际的规范。 这是谷歌提出的一个概念,并且是以他们的whatwg规范(不是官方的),只是部分支持Chrome。

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

在这一点上,我不会依赖这种inputtypes。 有,但是我不认为这是真的。 排名第一的原因是它为浏览器带来了太多的负担,以确定一个有点复杂的input的最佳用户界面。 从响应的angular度考虑,如何让供应商知道如何在400像素,800像素和1200像素宽的用户界面上发挥最佳效果?

以YYYY-MM-DD格式的date为例

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

虽然这不允许你得到一个datepicker的UI,Mozilla确实允许使用模式,所以你至less可以得到像这样的datevalidation:

 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))' 

最终,我同意@SuperUberDuper,因为Mozilla本身就包含了这一点。

这只是达克斯答案的一个build议。 (我会在这个答案中发表评论,但是我没有足够的声望评论其他问题)。

每个字段的ID应该是唯一的,所以,如果你的表单(或表单)有多个date字段,你可以使用类元素而不是ID:

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

和您的input为:

  <input type="text" class="datepicker" name="your-name" /> 

现在,每次你需要dateselect器,只需添加该类。 PS我知道,你仍然必须使用js :(但至less你已经为你的所有网站设置了我的2分钱…

Firefox的最新版本firefox 57(Quantum)支持在2017年11月14日发布的date和其他function。您可以点击此链接下载

感谢Alexander,我find了一个如何修改en lang格式的方法。 (不知道哪种语言使用这种格式)

  $.webshims.formcfg = { en: { dFormat: '/', dateSigns: '/', patterns: { d: "yy/mm/dd" } } }; $.webshims.activeLang('en'); 

有时你不想在你的项目中使用Datepicker http://jqueryui.com/datepicker/ ,因为:

  • 你不想使用jQuery
  • jquery版本在你的项目中的冲突
  • 一年的select是不方便的。 例如,您需要在prevbutton上点击120次才能移动到10年前。

请参阅我非常简单的跨浏览器代码dateinput。 我的代码只适用于您的浏览器不支持datetypesinput

 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Input Key Filter Test</title> <meta name="author" content="Andrej Hristoliubov anhr@mail.ru"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- For compatibility of IE browser with audio element in the beep() function. https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible --> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css"> <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script> <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script> </head> <body> <h1>Date field</h1> Date: <input type='date' id='date' /> New date: <span id="NewDate"></span> <script> CreateDateFilter('date', { formatMessage: 'Please type date %s' , onblur: function (target) { if (target.value == target.defaultValue) return; document.getElementById('NewDate').innerHTML = target.value; } , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date , dateLimitMessage: 'Please type date between "%min" and "%max"' } ); </script> </body> </html> 

这是完美的解决scheme。 你应该使用JQuery datepicker来input用户的date。 它使用起来非常简单,并且它有许多HTMLinputdate没有的function。

点击这里复制JQuerydateselect器代码

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <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> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html>