jQuery日历插件的使用

最新推荐文章于 2022-03-02 20:47:27 发布

piperzero

最新推荐文章于 2022-03-02 20:47:27 发布

阅读量208

点赞数

文章标签： javascript ViewUI

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

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

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

好，Let's start～

1、下载jQuery日期选择控件压缩包文件；
官方网站： http://www.eyecon.ro/datepicker/
下载地址： http://www.eyecon.ro/datepicker/datepicker.zip
下载完毕解压缩后会得到如下几个文件夹和文件

2、新建一个网页文件index.html；

<html>
<head>
<title>日期选择控件的使用</title>
</head>
<body>
</body>
</html>

3、把解压缩第一步中的datepicker.zip，得到的文件夹css、images、js拷到第二步新建的index.html同路径下；

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、测试效果