<!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>