`
redhacker
  • 浏览: 489499 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery datequicker使用示例

 
阅读更多
最近项目中要将一个日期组件替换掉，研究了下jQuery的datequicker组件，相当不错！下面为大家介绍一下其用法：

1、从jquery的官网下载datequicker组件（注意只下载这个组件及其依赖包）

2、整理js,css到不同的目录，最终在页面上这样去引用： 

<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>


3、由于每个页面中的日期组件不止一个，要做到对input组件加上日期组件，把渲染的js代码封装一下比较好，故end.js如下 

/** 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'
			});
		}
	});
}


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>
0
顶
0
踩
分享到：
| log4j发送邮件给多人的配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics