如何让 HTML5输入 type = “ date”在 Firefox 和/或 IE10中工作

我觉得奇怪的是，这么长时间以来，Firefox 仍然不支持 input type="date"。事实上，我不认为他们在一个输入元素中添加了很多(如果有的话) HTML5新类型。在 IE10中不支持它并不奇怪。所以，我的问题是..。

如何让 type="date"在一个 input元素上工作，而不需要添加另一个。Js 文件(即 jQueryUI DatePicker 小部件)只是为了得到一个日历/日期只为 IE 和 Firefox 浏览器？有没有什么东西可以应用到其他地方(比如 CDN?)这个功能在 Firefox 和/或 IE 浏览器中默认工作? ？试着瞄准 IE 8 + 浏览器和 Firefox，没关系，最新版本(28.0)就可以了。

更新: Firefox 57 + 支持输入 type = date

361729 次浏览
小开

Type = “ date”目前还不是一个实际的规范。这是谷歌想出来的一个概念，在他们的 whatwg 规范中(非官方) ，并且只有部分受到 Chrome 的支持。

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

在这一点上，我不会依赖于这种输入类型。这将是很好的有，但我不预见这一个实际上使它。第一个原因是它给浏览器带来了太多的负担，以至于无法为有些复杂的输入确定最佳 UI。从响应性的角度来考虑这个问题，供应商如何知道在400像素、800像素和1200像素宽度下，什么样的用户界面效果最好呢？

小开

您可以尝试 网片，这是可用的 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" />

如果默认配置不满足，那么就有 许多配置方法它。

注意: 虽然可能会有新的错误修复版本为 webshim 在未来。不会再有什么重大发布了。这包括对 jQuery 3.0或任何新特性的支持。

小开

感谢亚历山大，我找到了一种方法来修改格式的恩朗。(不知道哪个朗使用这样的格式)

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


$.webshims.activeLang('en');
小开

下面是一个完整的日期格式为 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" />
小开

有一种简单的方法可以通过使用 jQuery 提供的 DatePicker组件来消除这种限制。

    包括 jQuery 和 jQuery UI 库 (我还在用旧的)
    • Src = “ js/jquery-1.7.2. js”
    • Src = “ js/jquery-ui-1.7.2. js”
  1. 使用下面的代码片段

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

See jQuery UI DatePicker - Change Date Format if needed.

小开 
<!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>
小开

这只是达克斯回答后的一个建议。(我会在回答这个问题时发表评论，但我还没有足够的声誉来评论其他问题)。

ID 对于每个字段都应该是唯一的，因此，如果在表单(或表单)中有多个日期字段，则可以使用 class 元素而不是 ID:

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

以及你的意见如下:

 <input type="text" class="datepicker" name="your-name" />
现在，每次需要日期选择器时，只需添加该类。我知道，你仍然需要使用 js: (，但至少你已经为你所有的站点设置好了。 我的两分钱
小开

虽然这不允许你得到一个数据采集器 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))'

最终，我同意@SuperUberDuper 的观点，Mozilla 在本地化方面落后了很多。

小开

有时您不希望在项目中使用 Datepicker http://jqueryui.com/datepicker/，因为:

  • 你不想使用 jquery
  • 项目中 jquery 版本的冲突
  • 选择年份并不方便。比如，你需要点击120次 prev 按钮才能回到10年前。

请看我的日期输入非常简单的跨浏览器代码。我的代码只适用于您的浏览器不支持日期类型输入的情况

<!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>

小开
从第51版开始(2017年1月26日) , 但是默认情况下它还没有被激活

激活它:

关于: 配置

Dom.forms.datetime-> 设置为 true

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

小开

这是一个完美的解决方案。您应该对用户输入日期使用 JQuery 数据采集器。它非常容易使用，并且有很多 HTML 输入日期所没有的特性。

点击这里复制 JQuery 数据选择器代码

小开

Firefox 的最新版本 Firefox 57(Quantum)支持日期和其他功能，于2017年11月14日发布。您可以通过单击 这个链接下载它

小开
这是正确的解决办法。 您应该在任何地方使用 jquery datepicker 

  <script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>

下面是获取完整代码的链接

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

小开

我必须使用 bootstrap-datepicker插件才能在 Firefox 55便携版上使用日历:

https://bootstrap-datepicker.readthedocs.io/en/latest/

与 Bootstrap v2和 v3兼容。它有一个独立的样式表，所以你不必依赖于 Bootstrap。

用法:

<input class="datepicker">

$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});
小开

您可以在任何需要调用 Master.aspx 或 Layout 页面的地方使用这个数据采集器功能

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

    src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"

然后添加这个脚本，它可以在所有平台上工作。

 <script>
jQuery(function ($) { // wait until the DOM is ready
$(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
});`
</script>

您可以在多个页面上添加此“ edit orDate”。

< p >@Html. TextBoxFor (model = > model. FromDate，“{0: yyyy-MM-dd }”，html 属性: new { @ class = “ form-control edit orDate”})


提交答案