leo*_*per 73 html javascript jquery html5 jquery-ui
我正在使用HTML5元素输入属性,只有Google Chrome支持日期,时间属性.我尝试过Modernizr,但我无法理解如何将它集成到我的网站上(关于如何编码/什么是语法/包括).有关如何使用日期,时间属性到所有浏览器的任何代码片段.
ade*_*neo 102
任何不支持输入类型的浏览器都date将默认使用标准类型,text因此您需要检查的是type 属性 (而不是属性),如果不是date,浏览器不支持日期输入,并添加自己的日期选择器:
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
你当然可以使用你想要的任何日期选择器,jQuery UI的datepicker可能是最常用的,但它确实添加了相当多的javascript,如果你没有使用UI库的其他任何东西,但有数百个替代日期选择器从中选择.
该type属性永远不会更改,浏览器将只回退到text属性的默认类型,因此必须检查属性.
该属性仍可用作选择器,如上例所示.
jfm*_*att 14
Modernizr实际上并未改变有关如何处理新HTML5输入类型的任何内容.这是一个特征检测,而不是一个垫片(除<header>,<article>等等,其作为衬层块元素类似于待处理<div>).
要使用<input type='date'>,您需要签Modernizr.inputtypes.date入自己的脚本,如果是,则打开另一个提供日期选择器的插件.你有成千上万的选择; Modernizr维护着一份非详尽的polyfill列表,可能会让您在某个地方开始.或者,您可以放手 - 所有浏览器都会回归到text呈现他们无法识别的输入类型时,因此最糟糕的情况是您的用户必须输入日期.(您可能希望为它们提供占位符或使用类似jQuery.maskedinput的内容来使它们保持正常运行.)
Tim*_*m S 10
你问过Modernizr的例子,所以你走了.此代码使用Modernizr来检测是否支持"日期"输入类型.如果它不受支持,则它会返回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>
我希望这适合你.
<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>
| 归档时间： |
|
| 查看次数： |
153539 次 |
| 最近记录： |