先看看效果：
复制代码代码如下:使用很简单；
先创建一个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("").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='年月123456789101112日一二三四五六';this.spans=pj("span",this.container.get());this.as=pj("a",this.container.get()).setStyle({textDecoration:"none",color:"#333"});this.selects=pj("select",this.container.get());this.getCurrentDate=function(){return currentDate;};this.init();this.initYearList(yearListLength||70);var change=function(){},select=function(){};this.onChange=function(fn){//当改变年份或者月份是的事件监听器,以当前Calendar对象为上下文执行fn函数if(pj.isFunction(fn))change=fn;};this.onSelect=function(fn){//当选择日期时触发的函数，以当前Calendar对象为上下文执行fn函数if(pj.isFunction(fn))select=fn;};this.selects[0].onchange=function(){currentDate.setFullYear(parseInt(this.options[this.selectedIndex].value));_this.init();change.apply(_this,arguments);};//选择年份this.selects[1].onchange=function(){currentDate.setMonth(parseInt(this.options[this.selectedIndex].value)-1);_this.init();change.apply(_this,arguments);};//选择月份this.selects[1].options[currentDate.getMonth()].selected=true;this.as.addListener({click:function(){currentDate.setDate(parseInt(this.innerHTML));select.apply(_this,arguments);},mouseover:function(){if(_this.todate.getDate()+""!=this.innerHTML)this.style.color="#CCC";},mouseout:function(){if(_this.todate.getDate()+""!=this.innerHTML)this.style.color="#333";}});pj("td",this.container.get(0)).addListener({mouseover:function(){this.style.backgroundColor="#303";},mouseout:function(){this.style.backgroundColor="#9CF";}});}Calendar.prototype={init:function(){var cur=this.getCurrentDate(),i=new Date(cur.getFullYear(),cur.getMonth(),1).getDay(),//取星期j=new Date(cur.getFullYear(),cur.getMonth()+1,0).getDate();//取当月最大日数//alert(i);this.spans[0].innerHTML=cur.getFullYear();this.spans[1].innerHTML=cur.getMonth()+1;var m=0,n=this.as.length-1,isTodate=Calendar.isThisMonth(cur);while(m for(var day=1;daythis.as[i].innerHTML=day;if(isTodate&&day==this.todate.getDate()){this.todateLink=this.as[i];pj.setStyle(this.as[i],{color:"#F60",fontWeight:"bold"});}else if(!isTodate&&day==this.todate.getDate()&&this.todateLink){pj.setStyle(this.todateLink,{color:"#333",fontWeight:"normal"});}}},initYearList:function(len){Calendar.emptySelect(this.selects[0]);var cur=this.getCurrentDate(),now=this.todate.getFullYear(),max=Math.max(now-cur.getFullYear(),len);for(var y=0;yvar option=document.createElement("option");if(cur.getFullYear()==now)option.selected=true;else option.selected=false;option.text=now;option.value=now--;try{this.selects[0].add(option,null);}catch(e){this.selects[0].add(option);}}},getDateString:function(format){//format是日期格式,如yyyy-mm-ddif(!format||!/y{4}.m{2}.d{2}/.test(format))format="yyyy-mm-dd";format=format.replace(/^yyyy/,this.getCurrentDate().getFullYear());format=format.replace(/mm/,Calendar.fx(this.getCurrentDate().getMonth()+1));format=format.replace(/dd/,Calendar.fx(this.getCurrentDate().getDate()));return format;},todate:new Date(),todateLink:null,show:function(duration){this.container.show(duration);},hide:function(duration){this.container.hide(duration);},fadeIn:function(duration){this.container.fadeIn(duration);},fadeOut:function(duration){this.container.fadeOut(duration);},locateAt:function(obj,offsetX,offsetY){this.container.locate(obj,pj.LEFT_BOTTOM_POSITION,offsetX,offsetY);}};Calendar.emptySelect=function(target){if(!target.options)return;while(target.options.length>0)target.remove(0);};Calendar.fx=function(dig){return digCalendar.isThisMonth=function(date){return date.getFullYear()==Calendar.prototype.todate.getFullYear()&&date.getMonth()==Calendar.prototype.todate.getMonth();};本站打包在线演示http://demo.jb51.net/js/Calendar_pj/index.htm打包下载http://www.jb51.net/jiaoben/33760.html