日期选择器 html5 标记不适用于 Mozilla、IE 浏览器。但它仅适用于 Chrome
Posted
技术标签:
【中文标题】日期选择器 html5 标记不适用于 Mozilla、IE 浏览器。但它仅适用于 Chrome【英文标题】：Date picker html5 tag is not working on Mozilla, IE browsers. But its working only on Chrome 【发布时间】：2014-08-24 13:03:16 【问题描述】：我正在尝试在我的网站中使用 html 5 日期选择器标签。但是这个标签在 Mozilla 和 IE 上不支持。能否请您分享我在 IE 和 Mozilla 中使用此代码的任何技巧。
我只想使用 HTML5。我不想使用 javascript。
【问题讨论】：
【参考方案1】：日期仅在 Chrome、Opera、Safari 和 android 浏览器 4.4+ 中支持
http://beta.caniuse.com/#search=date
【讨论】：
【参考方案2】：你可以在 Mozilla 的情况下使用 jQuery 日期选择器：使用 $.browser.mozilla 检查浏览器，但它在 jQuery>1.9 中不起作用，所以你必须使用 jQuery Migration，如下所示：
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
<script>
if ($.browser.mozilla)
if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
$(function ()
$(".datepicker").datepicker(
changeMonth: true,
changeYear: true,
yearRange: "1900:2015",
dateFormat: "yy-mm-dd",
defaultDate: '1900-01-01'
);
);
</script>
【讨论】：
请注意，OP 说 我只想使用 HTML5。我不想使用 JavaScript。【参考方案3】：是的，Mozilla Firefox 不支持 HTML5 的 DatePicker 标签。但是您可以通过添加一些 .js 文件在您的网站中使用DatePicker。
下面是我使用一些 .js 文件的小提琴。此代码在 Chrome 和 Mozilla 上都能正常工作。
<script>
$(function()
$( "#datepicker" ).datepicker();
);
</script>
</head>
<body>
<p>Your Selected date Is : <input type="text" id="datepicker"></p>
http://jsfiddle.net/Vq65z/504/
【讨论】：
请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（与另一个中途停留的参考相比，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。 好的，我明白你想说的了。实际上，我是 stacoverflow 的新手，我对回答溢出问题了解不多。谢谢你的建议#t3chb0t。【参考方案4】：第一，回答OP，提问者要求做的事情是不可能的。 Javascript 是必需的。第二，虽然webshim 看起来很棒，但它与bootstrap 一起工作很糟糕。为此，您需要使用http://eonasdan.github.io/bootstrap-datetimepicker/
【讨论】：
【参考方案5】：不要忘记这样的文档类型：
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Firefox 和 mozilla 不支持 Date-HTML5 ！很快就会支持。
但它会在 Google-Chrome、Opera 和 Safari 上顺利运行
【讨论】：
Eirenaios 我只使用这个标签，但我的 IE 和 Mozilla 不支持这个标签。那么你能告诉我任何 CSS hack 吗？ jQuery UI 不是 html5 的唯一方式【参考方案6】：只需使用日期选择器 polyfill。这是demo。
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//webshim.setOptions('basePath', '/js-webshim/minified/shims/');
//request the features you need:
webshim.polyfill('es5 mediaelement forms');
$(function()
// use all implemented API-features on DOM-ready
);
</script>
<input type="date" />
【讨论】：
以上是关于日期选择器 html5 标记不适用于 Mozilla、IE 浏览器。但它仅适用于 Chrome的主要内容，如果未能解决你的问题，请参考以下文章
resignFirstResponder() 不适用于日期选择器
带有 UIControlEvents.valueChanged 的日期选择器不适用于第一个值更改事件