我正在使用HTML5元素输入属性，只有Google Chrome支持日期和时间属性。我试过Modernizr但我无法理解如何将它集成到我的网站上（关于如何编码/什么是语法/包括）。有关如何使用日期，时间属性到所有浏览器的任何代码片段。
答案 0 :(得分：95)
任何不支持输入类型date的浏览器都会默认为标准类型text，所以您只需检查类型属性 （不是属性），如果它不是date，浏览器不支持日期输入，并添加自己的日期选择器：
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
你当然可以使用你想要的任何日期选择器，jQuery UI的datepicker可能是最常用的，但如果你没有使用UI库，它会添加相当多的javascript，但是有数百个替代日期选择器可供选择。
type属性永远不会更改，浏览器只会回退到属性的默认text类型，因此必须检查属性。
该属性仍可用作选择器，如上例所示。
答案 1 :(得分：13)
Modernizr实际上并未改变有关如何处理新HTML5输入类型的任何内容。这是一个功能探测器，而不是一个垫片（<header>，<article>等除外，它可以作为与<div>类似的块元素处理） 。
要使用<input type='date'>，您需要在自己的脚本中检查Modernizr.inputtypes.date，如果错误，请启用另一个提供日期选择器的插件。你有成千上万的选择; Modernizr维护a non-exhaustive list of polyfills可能会让你在某个地方开始。或者，您可以放手 - 所有浏览器在显示他们无法识别的输入类型时会回退到text，因此最糟糕的情况是您的用户必须输入日期。 （您可能希望为它们提供占位符或使用类似jQuery.maskedinput的内容来使它们保持正常运行。）
答案 2 :(得分：8)
你问过Modernizr的例子，所以你走了。此代码使用Modernizr来检测＆＃39; date＆＃39;支持输入类型。如果它不受支持，则它会回到JQueryUI datepicker。
注意：您需要下载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>
我希望这适合你。
答案 3 :(得分：6)
答案 4 :(得分：5)
<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>
答案 5 :(得分：3)
只需在<script src="modernizr.js"></script>部分中使用<head>，脚本就会添加帮助您将两种情况分开的类：如果当前浏览器支持，或者不支持。
另外请点击此主题中发布的链接。它会对您有所帮助：HTML5 input type date, color, range support in Firefox and Internet Explorer
答案 6 :(得分：2)
Chrome版本50.0.2661.87 m在分配给变量时不支持mm-dd-yy格式。它使用yy-mm-dd。 IE和Firefox按预期工作。
答案 7 :(得分：1)
只需在脚本部分中添加 Better-Dom 和 Better-Dateinput-Polyfill 。
这里是演示：
http://chemerisuk.github.io/better-dateinput-polyfill/
答案 8 :(得分：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>
答案 9 :(得分：0)
我发现最好的简单易用的解决方案是在以下浏览器上工作
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>
答案 10 :(得分：0)
我遇到了这方面的问题，保持英国dd / mm / yyyy格式，我最初使用了adeneo https://stackoverflow.com/a/18021130/243905的答案但是在我的徒步旅行中没有用，所以改为这个，就我而言可以告诉所有工作 - 使用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;
}
}
答案 11 :(得分：-2)
使用过滤器对此有一个非常简单有效的解决方案。您只需将以下过滤器添加到functions.php文件中即可：
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );