jQuery日历插件的使用

jQuery是目前最流行的JavaScript库,它极大的简化了JavaScript的开发。

下面是一个jQuery日历插件的例子,效果如图所示

jQuery日历插件的使用

如果你觉得看图不过瘾, 点击这里查看在线演示。

好,Let's start~ 得意

1、 下载jQuery日期选择控件压缩包文件;
官方网站: http://www.eyecon.ro/datepicker/
下载地址: http://www.eyecon.ro/datepicker/datepicker.zip
下载完毕解压缩后会得到如下几个文件夹和文件
jQuery日历插件的使用
2、 新建一个网页文件index.html;
<html>
<head>
<title>日期选择控件的使用</title>
</head>
<body>
</body>
</html>
3、 把解压缩第一步中的datepicker.zip,得到的文件夹css、images、js拷到第二步新建的index.html同路径下;
jQuery日历插件的使用
4、 在网页之中加入jQuery及datepicker(日历控件)支持;
具体操作为在<head></head>标签内的任意位置内加入如下两行代码:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
网页代码如下:
<html>
<head>
	<title>日期选择控件的使用</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/datepicker.js"></script>
</head>
<body>
</body>
</html>
5、 在网页中加入产生日历控件的表单;
即在<body></body>内加入
<input class="inputDate" id="inputDate" value="06/14/2008" />
网页代码如下:
<html>
<head>
	<title>日期选择控件的使用</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/datepicker.js"></script>
</head>
<body>
	<input class="inputDate" id="inputDate" value="06/14/2008" />
</body>
</html>
6、 在网页中加入datepicker日历控件的样式;
即在<head></head>标签内加入如下代码,注意最好加在第四步代码的前面:
<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
7、 在网页中加入触发脚本;
即在<head></head>标签内加入如下代码,注意应加在第四步代码的后面:
	<script type="text/javascript">
		$(document).ready(function(){
			$('#inputDate').DatePicker({
				format:'m/d/Y',
				date: $('#inputDate').val(),
				current: $('#inputDate').val(),
				starts: 1,
				position: 'r'
			});
		});
	</script>
大功告成~
完整的网页代码为:
<html>
<head>
	<title>日期选择控件的使用</title>
	<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/datepicker.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#inputDate').DatePicker({
				format:'m/d/Y',
				date: $('#inputDate').val(),
				current: $('#inputDate').val(),
				starts: 1,
				position: 'r'
			});
		});
	</script>
</head>
<body>
	<input class="inputDate" id="inputDate" value="06/14/2008" />
</body>
</html>
7、 测试效果
jQuery日历插件的使用

是不是觉得还没有过瘾?好吧, 点击这里还有其他9款jQuery控件,哈哈,选一款自己喜欢的练习一下吧!


想了解更多关于jQuery的知识? 点击这里系统的学习一下吧~ 奋斗

W3School



你可能感兴趣的:(jquery)