一个简单的jQuery日历插件Calendar.js

一个简单的jQuery日历插件Calendar.js，可以通过左右箭头切换不同的月份，也可以直接输入年份或月份，点选日期后在点击“确定”，即可获得当前选中的完整日期了，比较轻量级的一个日期插件，喜欢的童鞋请收下吧。

分类：日期时间 > 日期控件难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入一个CSS样式文件，远程调用jQuery库，并引入关键的日历插件，代码如下：

<link type="text/css" rel="stylesheet" href="css/calendar.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"src='js/calendar.js'></script>

页面的body部分，主要的一个div是日历的容器，其余的均为说明文字内容，代码如下：

<h3>Calendar.js--一个简单的日历插件</h3>
<ul>
	<li>体积很小</li>
	<li>使用方便</li>
	<li>便于我们使用到不同场景</li>
	<li>只需修改CSS就可适用PC端和移动端</li>
</ul>
<hr>
点击查看效果
<div style='width:300px;height:30px;line-height:30px;padding-left: 6px;background:#efefef;' id='date'></div>
<h3 class='info'></h3>

页面的底部，响应点击事件并启用日期插件获得选择日期的数据，代码如下：

$('#date').on('click',function(){
	new Calendar({id:'#date',callback:function(y,m,d){
		if(arguments.length>1){
			$('#date').html(y+'-'+m+'-'+d);
			$('.info').html('选定的时间是：'+y+'年'+m+'月'+d+'日');
		}else{
			$('.info').html('您为什么选择：'+y);
		}
	}
	})
})