我正在使用 HTML5 元素输入属性，只有 Google Chrome 支持日期、时间属性。我尝试了Modernizr，但我不明白如何将它集成到我的网站上（关于如何对其进行编码/什么是语法/包含）。那里有关于如何使用所有浏览器的日期、时间属性的任何代码片段。
问问题
191006 次
11 回答
123
任何不支持输入类型的浏览器date都会默认为标准类型，即text，所以你要做的就是检查 type属性 （不是属性），如果不是date，则浏览器不支持日期输入，然后添加自己的日期选择器：
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
你当然可以使用任何你想要的日期选择器，jQuery UI 的日期选择器可能是最常用的一个，但是如果你没有将 UI 库用于其他任何东西，它确实会添加相当多的 javascript，但是有数百个替代日期选择器从中选择。
type属性永远不会改变，浏览器只会回退到属性的默认类型text，所以必须检查属性。
该属性仍然可以用作选择器，如上例所示。
于 2013-08-02T15:47:17.813 回答
14
Modernizr 实际上并没有改变新的 HTML5 输入类型的处理方式。它是一个特征检测器，而不是一个 shim（除了<header>,<article>等，它会作为类似于 的块元素处理<div>）。
要使用<input type='date'>，您需要签Modernizr.inputtypes.date入自己的脚本，如果它是错误的，请打开另一个提供日期选择器的插件。您有数千种选择；Modernizr 维护了一个非详尽的 polyfill 列表，可能会给你一个开始的地方。或者，您可以放手 - 所有浏览器都会text在出现他们无法识别的输入类型时回退，因此最糟糕的情况是您的用户必须输入日期。（你可能想给他们一个占位符或使用 jQuery.maskedinput 之类的东西来让他们保持正轨。）
于 2013-08-02T15:47:16.327 回答
11
你问了 Modernizr 的例子，所以你去。此代码使用 Modernizr 来检测是否支持“日期”输入类型。如果它不受支持，那么它会故障返回到 JQueryUI 日期选择器。
注意：您需要下载 JQueryUI 并可能在您自己的代码中更改 CSS 和 JS 文件的路径。
<!DOCTYPE html>
<html>
<head>
<title>Modernizer Detect 'date' input type</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
if(!Modernizr.inputtypes.date) {
console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
$("#theDate").datepicker();
}
});
</script>
</head>
<body>
<form>
<input id="theDate" type="date"/>
</form>
</body>
</html>
我希望这对你有用。
于 2013-08-02T16:30:08.000 回答
7
<script>
var datefield = document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
jQuery(function($) { // on document.ready
$('#birthday').datepicker();
}); <- missing semicolon
}
</script>
<body>
<form>
<b>Date of birth:</b>
<input type="date" id="birthday" name="birthday" size="20">
<input type="button" value="Submit" name="B1">
</form>
</body>
于 2014-04-27T09:23:33.203 回答
3
只需<script src="modernizr.js"></script>在该<head>部分中使用，脚本将添加帮助您区分两种情况的类：当前浏览器是否支持，或者不支持。
另外，请按照此线程中发布的链接进行操作。它将帮助您：Firefox 和 Internet Explorer 中的 HTML5 输入类型日期、颜色、范围支持
于 2013-08-02T15:40:59.900 回答
2
两脚本包含解决方案（2019）：
只需在脚本部分包含Better-Dom和Better-Dateinput-Polyfill。
这是一个演示：
http ://chemerisuk.github.io/better-dateinput-polyfill/
于 2019-08-08T10:30:02.683 回答
2
我发现最好的简单和有效的解决方案是，在以下浏览器上工作
- 谷歌浏览器
- 火狐
- 微软边缘
苹果浏览器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <h2>Poly Filler Script for Date/Time</h2> <form method="post" action=""> <input type="date" /> <br/><br/> <input type="time" /> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <script> webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {type: 'date'}); webshims.setOptions('forms-ext', {type: 'time'}); webshims.polyfill('forms forms-ext'); </script> </body> </html>
于 2017-04-13T09:32:09.897 回答
2
Chrome 版本 50.0.2661.87 m 在分配给变量时不支持 mm-dd-yy 格式。它使用 yy-mm-dd。IE 和 Firefox 按预期工作。
于 2016-04-27T20:32:49.427 回答
0
我遇到了这个问题，维护英国 dd/mm/yyyy 格式，我最初使用了来自 adeneo https://stackoverflow.com/a/18021130/243905的答案，但是这对我来说在 safari 中不起作用所以改为这个，据我所知，这一切都有效 - 使用 jquery-ui datepicker，jquery 验证。
if ($('[type="date"]').prop('type') !== 'date') {
//for reloading/displaying the ISO format back into input again
var val = $('[type="date"]').each(function () {
var val = $(this).val();
if (val !== undefined && val.indexOf('-') > 0) {
var arr = val.split('-');
$(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
}
});
//add in the datepicker
$('[type="date"]').datepicker(datapickeroptions);
//stops the invalid date when validated in safari
jQuery.validator.methods["date"] = function (value, element) {
var shortDateFormat = "dd/mm/yy";
var res = true;
try {
$.datepicker.parseDate(shortDateFormat, value);
} catch (error) {
res = false;
}
return res;
}
}
于 2018-03-02T10:41:01.700 回答
0
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
var datefield = document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
jQuery(function($) { // on document.ready
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd'
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd'
});
})
}
</script>
</head>
<body>
<input name="start_date" id="start_date" type="date" required>
<input name="end_date" id="end_date" required>
</body>
</html>
于 2016-01-12T10:21:00.707 回答