日历之完美版-添加了输入框

最新推荐文章于 2024-06-02 09:47:02 发布

undefined001

最新推荐文章于 2024-06-02 09:47:02 发布

阅读量377

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/undefined001/article/details/39497133

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历</title>
<style type="text/css">
#calendar{ width:200px; background:pink; margin:5px; overflow:hidden; position:absolute; z-index:100}
#calendar h6{ position:relative; text-align:center;padding:0; margin:0; font-size:16px}
#calendar h6 span{ position:absolute; color:#F00; background:#ccc; cursor:pointer;-webkit-user-select:none; -moz-user-select:none}
#calendar h6 span.prev{ left:0}
#calendar h6 span.next{ right:3px; top:0}
#calendar ul{ padding:0; margin:5px;}
#calendar ul li{ width:25px; height:25px; float:left; list-style:none; border-bottom:1px solid #CCC; border-right:#CCC 1px solid; cursor:none; cursor:pointer}
</style>
</head>

<body>
<input type="text" value="" onFocus="createCalendar(this)" />
<div style="height:200px">吕红红</div>
</body>
</html>
<script>
  function createCalendar(ele){
   var obj=offset(ele);
   var x=obj.left;
   var y=obj.top+ele.offsetHeight+1;

   if(!document.getElementById('calendar')){
  var calendar=document.createElement('div');
  //document.getElementById('calendar');
  calendar.id="calendar";
  calendar.style.top=y+"px";
  calendar.style.left=x+"px";
  var h6=document.createElement('h6');
  var prev=document.createElement('span');
  prev.className="prev";
  prev.innerHTML="prev";
  var title=document.createElement('div');
  var next=document.createElement('span');
  next.className="next";
  next.innerHTML="next";
  calendar.appendChild(h6);
  h6.appendChild(prev);
  h6.appendChild(title);
  h6.appendChild(next);
  document.body.appendChild(calendar);
  ele.οnblur=function(){
   //document.body.removeChild(calendar);
   //calendar=null;
   }

   }

  var oUl=document.createElement('ul');
  var currentDate= new Date;
  var currentYear=currentDate.getFullYear();
  var currentMonth=currentDate.getMonth();

  prev.οnclick=function(){active(--currentMonth)};
  next.οnclick=function(){active(++currentMonth)};
  active(currentMonth)
  calendar.appendChild(oUl);

  function active(m){
   oUl.innerHTML="";
   var activeDate=new Date(currentYear,m,1);
   //activeDate.setDate(1);
   var month=activeDate.getMonth();
   title.innerHTML=activeDate.getFullYear()+"年"+(month+1)+"月";
   var diff=1-activeDate.getDay();
   if(diff==1)diff=-6
   activeDate.setDate(diff);

   for(var i=0;i<42;i++){
    var oLi=document.createElement('li');
    var date=activeDate.getDate();
    oLi.innerHTML=date;
    oLi.dateValue=activeDate.getFullYear()+"-"+(activeDate.getMonth()+1)+"-"+date;


    oLi.οnclick=function(){
     ele.value=this.dateValue;//"2014-9-23";
     document.body.removeChild(calendar);
           calendar=null;
     }

    oUl.appendChild(oLi)
    if(activeDate.getMonth()!=month){//判断是不是当月
     oLi.style.color="#fff";
     }

  activeDate.setDate(date+1)
  }
  }

  }

function offset(ele){
var l=ele.offsetLeft;
var t=ele.offsetTop;
var p=ele.offsetParent;
while(p){
  if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
   l+=p.offsetLeft;
   t+=p.offsetTop;
  }else{
   l+=p.offsetLeft+p.clientLeft;
   t+=p.offsetTop+p.clientTop;
  }
  p=p.offsetParent;
}
return {left:l,top:t}
}
</script>