1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>日历控件</title> 6 <style type="text/css"> 7 #calendar{ width:142px; padding:5px; height:198px; background:#FCF; -webkit-user-select:none; position:absolute;} 8 #calendar div.week span,#calendar span.date{ width:14px; font-size:12px; height:20px; text-align:center; line-height:20px; border:1px solid #ccc; margin:2px; float:left;} 9 #calendar span.date{ background:#fff; cursor:pointer;} 10 #calendar div.week{ clear:both; overflow:hidden;} 11 #calendar div.week span{ font-weight:bold;} 12 #calendar h6{ margin:0; padding:0; font-size:14px; line-height:20px; text-align:center; position:relative; overflow:hidden; height:20px;} 13 #prev,#next{ width:45px; text-align:center; position:absolute; color:blue; cursor:pointer; } 14 #prev{ left:0;} 15 #next{ right:0;} 16 </style> 17 </head> 18 19 <body> 20 <input type="text" value="请输入……" id="input1"> 21 </body> 22 </html> 23 <script> 24 input1.onfocus=function(){ 25 createCalendar(this); 26 } 27 //input1.onfocus=new Function("this;calendar(this)"); 28 function createCalendar(ele){ 29 var obj=offset(ele); 30 var l=obj.left; 31 var t=obj.top; 32 var oCalendar=document.getElementById('calendar'); 33 if(oCalendar)return; 34 oCalendar=document.createElement('div'); 35 oCalendar.style.top=t+'px'; 36 oCalendar.style.left=l+ele.offsetWidth+5+'px'; 37 oCalendar.id="calendar"; 38 var oTitle=document.createElement('h6'); 39 oCalendar.appendChild(oTitle); 40 oTitle.className="title"; 41 //创建上prev按钮 42 var oPrev=document.createElement('span'); 43 oPrev.id="prev"; 44 oPrev.innerHTML="prev"; 45 oTitle.appendChild(oPrev); 46 oPrev.onclick=function(){activeCalendar(--month);} 47 //创建中间titleContent 48 var oTitleContent=document.createElement('span'); 49 //oTitleContent.id="titleContent"; 50 oTitle.appendChild(oTitleContent); 51 var d=new Date; 52 var year=d.getFullYear(); 53 var month=d.getMonth(); 54 var m=month; 55 //oTitleContent.innerHTML=year+"年"+(month+1)+"月" 56 //创建next按钮 57 var oNext=document.createElement('span'); 58 oNext.id="next"; 59 oNext.innerHTML="next"; 60 oNext.onclick=function(){activeCalendar(++month);} 61 oTitle.appendChild(oNext); 62 //创建周的导航栏 63 var aWeek=["日","一","二","三","四","五","六"]; 64 var oWeek=document.createElement('div'); 65 oWeek.className="week"; 66 oCalendar.appendChild(oWeek); 67 68 69 for(var i=0;i<7;i++){ 70 var oSpan=document.createElement('span'); 71 oSpan.innerHTML=aWeek[i]; 72 oWeek.appendChild(oSpan); 73 } 74 //创建日期的容器 75 var oDateContent=document.createElement('div'); 76 oDateContent.id="dateContent"; 77 oCalendar.appendChild(oDateContent); 78 document.body.appendChild(oCalendar); 79 activeCalendar(month); 80 function activeCalendar(month){ 81 oDateContent.innerHTML=""; 82 var d1=new Date(year,month,1); 83 var diff=1-d1.getDay(); 84 month=d1.getMonth(); 85 if(diff==1)diff=-6; 86 d1.setDate(diff); 87 88 oTitleContent.innerHTML=d1.getFullYear()+"年"+(d1.getMonth()+2)+"月" 89 for(var i=0;i<42;i++){ 90 var oSpan=document.createElement('span'); 91 oSpan.className="date"; 92 var currentDate=d1.getDate(); 93 oSpan.innerHTML=currentDate; 94 oSpan.curDate=d1.getFullYear()+"-"+(d1.getMonth()+1)+"-"+currentDate; 95 if(d1.getMonth()!=month){ 96 oSpan.style.backgroundColor="#ccc"; 97 } 98 oSpan.onclick=function(){ 99 ele.value=this.curDate; 100 document.body.removeChild(oCalendar); 101 oCalendar=null 102 103 } 104 d1.setDate(++currentDate); 105 oDateContent.appendChild(oSpan); 106 } 107 } 108 } 109 110 function offset(ele){ 111 var l=ele.offsetLeft; 112 var t=ele.offsetTop; 113 var p=ele.offsetParent; 114 while(p){ 115 if(window.navigator.userAgent.indexOf("MSIE 8")>-1){ 116 l+=p.offsetLeft; 117 t+=p.offsetTop; 118 }else{ 119 l+=p.offsetLeft+p.clientLeft; 120 t+=p.offsetTop+p.clientTop; 121 } 122 p=p.offsetParent; 123 } 124 return {left:l,top:t} 125 } 126 127 </script>