javascript写的日历类(基于pj)
作者：
在网上搜索了一些用javascript写的日历类都不太令人满意，主要是用了之后还要写很多客户端代码，有空之余，自己动手写了一个。主要是推广自己写的js pr库。
先看看效果：
<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: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></table>';
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<n){this.as[m].innerHTML=this.as[n].innerHTML='';n--;m++;}//清空
for(var day=1;day<=j;day++,i++){
this.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;y<=max;y++){//年份下拉列表长度为12
var 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-dd
if(!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 dig<10?'0'+dig:dig};
Calendar.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
打包下载 https://www.jb51.net/jiaoben/33760.html
复制代码 代码如下:
<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: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></table>';
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<n){this.as[m].innerHTML=this.as[n].innerHTML='';n--;m++;}//清空
for(var day=1;day<=j;day++,i++){
this.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;y<=max;y++){//年份下拉列表长度为12
var 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-dd
if(!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 dig<10?'0'+dig:dig};
Calendar.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
打包下载 https://www.jb51.net/jiaoben/33760.html