原生js-日历插件

最新推荐文章于 2023-12-26 14:29:38 发布

weixin_30787531

最新推荐文章于 2023-12-26 14:29:38 发布

阅读量129

点赞数

原文链接：http://www.cnblogs.com/tomorrowdemo/p/3834998.html

版权

  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.οnfοcus=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>

转载于:https://www.cnblogs.com/tomorrowdemo/p/3834998.html

weixin_30787531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js-日历插件

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>日历控件</title> 6 <style type="text/css"> 7 #calendar{ width:142px; p...
复制链接

扫一扫