javascript写的日历类(基于pj)

答案：先看看效果： 
复制代码 代码如下:
 
<script type="text/javascript" src="http://users4.Jabry.com/pengju/src/pj-2.1.1.mini.js"></script> 
<script type="text/javascript" src="http://users4.Jabry.com/pengju/src/Calendar.js"></script> 
<input name="" type="text" id="pos" style="position:absolute; left:200px; top:80px;" value="" readonly="readonly" /> 
<script type="text/javascript"> 
var cat=new Calendar(new Date(1633,6,6),100); 
cat.onChange(function(){alert(this.getDateString())}) 
cat.onSelect(function(){alert(this.getDateString());}); 
cat.fadeIn(0) 
var o=new Calendar(); 
o.locateAt(pj.id("pos")); 
o.onSelect(function(){pj.id("pos").value=this.getDateString();this.hide()}); 
pj("#pos").focus(function(){o.show(100)}); 
</script> 
 
使用很简单； 
先创建一个Calendar对象 
复制代码 代码如下:
 
var calendar=new Calendar(); 
 
只要调用show()方法即可显示 
复制代码 代码如下:
 
calendar.show() 
 
其实调用的是pj库的show方法 
因此在使用之前要先把pj库引进来，在把Calendar.js引进来就可以 
Calendar的主要方法有 
getDateString([pattern]) format是日期格式,默认是yyyy-mm-dd 
show:function(duration) 显示日历 
hide:function(duration)隐藏日历 
fadeIn:function(duration)淡入日历 
fadeOut:function(duration)淡出日历 
locateAt:function(obj,offsetX,offsetY)把日历定位到指定的元素正下方，offsetX、offsetY可选，是相对于X、Y轴的偏移量 

只定义了两个事件 
onChange(fn)//当改变年份或者月份是的事件监听器,以当前Calendar对象为上下文执行fn函数 
onSelect(fn)//当选择日期时触发的函数，以当前Calendar对象为上下文执行fn函数 

还是把源代码粘贴上来吧（有点多，因为封装了一个table） 
复制代码 代码如下:
 
//date:默认开始日期,不需要可以是null(以当天日期开始),yearListLength:年份下拉列表长度 
function Calendar(date,yearListLength){ 
var currentDate=date||new Date(),_this=this; 

this.container=pj("<div>").appendTo(document.body).setStyle({overflow:'hidden',background: '#99CCFF',border:'1px solid #CCC',fontSize:'12px',height:'160px',width:'180px',position:"absolute",display:'none'}); 
this.container.get().innerHTML='<table border="0" style=" height:160px;width:180px;"><tr> <td colspan="2" align="center" valign="middle"> <select></select></td> <td colspan="3" align="center" valign="middle"><span></span>年<span></span>月</td> <td colspan="2" align="center" valign="middle"> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select></td></tr><tr style="color: #999;"> <td align="center" valign="middle">日</td> <td align="center" valign="middle">一</td> <td align="center" valign="middle">二</td> <td align="center" valign="middle">三</td> <td align="center" valign="middle">四</td> <td align="center" valign="middle">五</td> <td align="center" valign="middle">六</td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href="javascript:void(0)"> </a></td> <td align="center" valign="middle"><a href

上一个：JavaScript去掉空格的方法集合
下一个：jQuery中append、insertBefore、after与insertAfter方法注意事项