最近项目中要将一个日期组件替换掉,研究了下jQuery的datequicker组件,相当不错!下面为大家介绍一下其用法:
1、从jquery的官网下载datequicker组件(注意只下载这个组件及其依赖包)
2、整理js,css到不同的目录,最终在页面上这样去引用:
[code]
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js"></script>
[/code]
3、由于每个页面中的日期组件不止一个,要做到对input组件加上日期组件,把渲染的js代码封装一下比较好,故end.js如下
[code]
/** init jquery datepicker instanses*/
if (typeof(dateInputIds) != "undefined") {
$(function() {
for(var dateInputId in dateInputIds) {
$( "#" + dateInputIds[dateInputId] ).datepicker({
showOn: "button",
buttonImage: "images/Calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '1900:2040'
});
}
});
}
[/code]
4、这样以来,在start.js里申明一各数组,如下
5、在页面中要渲染一个日期的input,只需要做两步:指定input组件的id;将id压入dateInputIds数组中,示例如下:
6、最终一个示例的html页面如下:
1、从jquery的官网下载datequicker组件(注意只下载这个组件及其依赖包)
2、整理js,css到不同的目录,最终在页面上这样去引用:
[code]
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js"></script>
[/code]
3、由于每个页面中的日期组件不止一个,要做到对input组件加上日期组件,把渲染的js代码封装一下比较好,故end.js如下
[code]
/** init jquery datepicker instanses*/
if (typeof(dateInputIds) != "undefined") {
$(function() {
for(var dateInputId in dateInputIds) {
$( "#" + dateInputIds[dateInputId] ).datepicker({
showOn: "button",
buttonImage: "images/Calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '1900:2040'
});
}
});
}
[/code]
4、这样以来,在start.js里申明一各数组,如下
var dateInputIds = [];
5、在页面中要渲染一个日期的input,只需要做两步:指定input组件的id;将id压入dateInputIds数组中,示例如下:
<div>
起始日期: <input type="text" id="startDate">
终止日期: <input type="text" id="endDate">
出生日期: <input type="text" id="birthday">
</div>
<script>
dateInputIds.push("startDate");
dateInputIds.push("endDate");
dateInputIds.push("birthday");
</script>
6、最终一个示例的html页面如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="author" content="redhacker(beanor#gmail.com)" />
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script src="js/start.js"></script>
</head>
<body>
<div>
<p>起始日期: <input type="text" id="startDate"></p>
<p>终止日期: <input type="text" id="endDate"></p>
<p>出生日期: <input type="text" id="birthday"></p>
</div>
<script>
dateInputIds.push("startDate");
dateInputIds.push("endDate");
dateInputIds.push("birthday");
</script>
<script src="js/end.js"></script>
</body>
</html>