如何获取在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="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组件来消除这个限制。
-
包括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'}); });
请参阅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>
