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)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td></tr><tr> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</a></td> <td align="center" valign="middle"><a href="javascript:void(0)">&nbsp;</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