我正在使用 HTML5 元素的输入属性，只有 Google Chrome 支持日期、时间属性。我试过Modernizr，但我不明白如何将它集成到我的网站上（关于如何编码/什么是语法/包含）。关于如何使用所有浏览器的日期、时间属性的任何代码 sn-p。
【问题讨论】：
标签： javascript jquery html jquery-ui
任何不支持输入类型date的浏览器都会默认为标准类型text，所以你要做的就是检查类型property (不是属性），如果不是date，则浏览器不支持日期输入，你自己添加日期选择器：
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
你当然可以使用任何你想要的日期选择器，jQuery UI 的日期选择器可能是最常用的一个，但是如果你不将 UI 库用于其他任何事情，它确实会添加相当多的 javascript，但是有数百个可供选择的替代日期选择器。
type 属性永远不会改变，浏览器只会回退到属性的默认text 类型，所以必须检查属性。
该属性仍然可以用作选择器，如上例所示。
【讨论】：
$('input').prop('type') != 'date'
Modernizr 实际上并没有改变新的 HTML5 输入类型的处理方式。这是一个检测器的功能，而不是垫片（<header>、<article> 等除外，它被当作类似于<div> 的块元素处理）。
要使用<input type='date'>，您需要在自己的脚本中检查Modernizr.inputtypes.date，如果它为假，请打开另一个提供日期选择器的插件。您有数千种选择； Modernizr 维护a non-exhaustive list of polyfills，这可能会给你一个开始的地方。或者，您可以放手 - 所有浏览器在出现他们无法识别的输入类型时都会退回到text，因此最糟糕的情况是您的用户必须输入日期。 （你可能想给他们一个占位符或使用类似 jQuery.maskedinput 的东西来让他们保持正常。）
【讨论】：
您要求提供 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>
我希望这对你有用。
【讨论】：
<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>
【讨论】：
只需在<head> 部分中使用<script src="modernizr.js"></script>，脚本就会添加类来帮助您区分两种情况：当前浏览器是否支持。
另外，请按照此线程中发布的链接进行操作。它会帮助你：HTML5 input type date, color, range support in Firefox and Internet Explorer
【讨论】：
Chrome 版本 50.0.2661.87 m 在分配给变量时不支持 mm-dd-yy 格式。它使用 yy-mm-dd。 IE 和 Firefox 按预期工作。
【讨论】：
我发现最好的简单和有效的解决方案是，在以下浏览器上工作
Safari
<!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>
【讨论】：
只需在您的脚本部分包含 Better-Dom 和 Better-Dateinput-Polyfill。
这是一个演示：
http://chemerisuk.github.io/better-dateinput-polyfill/
【讨论】：
我遇到了问题，维护英国 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;
}
}
【讨论】：
<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>
【讨论】：