javascript实现日历控件(年月日关闭按钮)

　　sx.activex.calender={

　　bind:function(target){

　　var a=document.createElement("div");

　　var head=document.createElement("div");

　　var biaoti=document.createElement("div");

　　var select=document.createElement("select");

　　var yface=document.createElement("span");

　　var mface=document.createElement("span");

　　var body=document.createElement("div");

　　var select1=document.createElement("select");

　　yface.appendChild(select);

　　mface.appendChild(select1);

　　head.appendChild(yface);

　　head.appendChild(mface);

　　a.appendChild(head);

　　a.appendChild(biaoti);

　　a.appendChild(body);

　　yface.insertBefore(document.createTextNode("年 "),yface.firstChild)

　　mface.insertBefore(document.createTextNode("月 "),mface.firstChild)

　　a.style.position="absolute";

　　biaoti.style.height="10%";

　　for(var i=0;i<7;i++){

　　var can=document.createElement("span")

　　can.style.width="14%";

　　can.style.height="100%";

　　can.style.textAlign="center";

　　biaoti.appendChild(can);

　　}

　　biaoti.all[0].innerText="日"

　　biaoti.all[1].innerText="一"

　　biaoti.all[2].innerText="二"

　　biaoti.all[3].innerText="三"

　　biaoti.all[4].innerText="四"

　　biaoti.all[5].innerText="五"

　　biaoti.all[6].innerText="六"

　　head.style.height="20%";

　　a.style.position="absolute";

　　a.style.height="200px";

　　a.style.width="302px";

　　a.style.border="1px red solid";

　　yface.style.width="50%";

　　yface.style.padding="5px";

　　yface.style.height="100%";

　　select.style.width="80%";

　　for(var i=1960;i<2010;i++){

　　var option=document.createElement("option");

　　option.text=i;

　　select.add(option);

　　}

　　mface.style.width="50%";

　　mface.style.padding="5px";

　　mface.style.height="100%";

　　select1.style.width="80%";

　　for(var i=1;i<=12;i++){

　　var option=document.createElement("option");

　　option.text=i;

　　select1.add(option);

　　}

　　body.style.height="70%";

　　for(var i=0;i<42;i++){

　　var span=document.createElement("span");

　　span.style.width="14%";

　　span.style.height="16%";

　　span.style.textAlign="center";

　　span.onmouseover=function(){

　　this.style.cursor="hand";

　　this.tempcolor=this.style.backgroundColor;

　　this.style.backgroundColor="lightblue";

　　}

　　span.onmouseout=function(){

　　this.style.backgroundColor=this.tempcolor;

　　}

　　span.onclick=function(){

　　target.value=select.options[select.selectedIndex].text+"年"+select1.options[select1.selectedIndex].text+"月"+this.innerText+"日";

　　a.parentNode.removeChild(a);

　　}

　　body.appendChild(span);

　　}

　　select.onchange=function(){

　　for(var o in body.all){

　　body.all[o].innerText="";

　　if(o.toString()!="length")

　　body.all[o].style.backgroundColor="";

　　}

　　var year1=this.options[this.selectedIndex].text;

　　var month1=select1.options[select1.selectedIndex].text;

　　var y=parseInt(year1.substr(2,2)-0);

　　var c=parseInt(year1.substr(0,2));;

　　var m=parseInt(month1);;

　　m=m>=3?m:(y=y-1,m+12);

　　var d=1;

　　var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;

　　if(w<0) w=w+700;

　　w=w%7;

　　switch(parseInt(month1)){

　　case 2:

　　if(parseInt(year1)%4==0)

　　var r=29;

　　else

　　var r=28;

　　var day=w;

　　for(var d=1;d<=r;d++){

　　body.all[day++].innerText=d;

　　if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

　　body.all[day-1].style.backgroundColor="red";

　　body.all[41].innerText="关闭";

　　}

　　break;

　　default:

　　if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12)

　　var r=31;

　　else

　　var r=30;

　　var day=w;

　　for(var d=1;d<=r;d++){

　　body.all[day++].innerText=d;

　　if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

　　body.all[day-1].style.backgroundColor="red";

　　body.all[41].innerText="关闭";

　　}

　　break;

　　}

　　}

　　select1.onchange=function(){

　　for(var o in body.all){

　　body.all[o].innerText="";

　　if(o.toString()!="length")

　　body.all[o].style.backgroundColor="";

　　}

　　var month1=this.options[this.selectedIndex].text;

　　var year1=select.options[select.selectedIndex].text;

　　var y=parseInt(year1.substr(2,2)-0);

　　var c=parseInt(year1.substr(0,2));

　　var m=parseInt(month1);

　　m=m>=3?m:(y=y-1,m+12);

　　var d=1;

　　var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;

　　if(w<0) w=w+700;

　　w=w%7;

　　switch(parseInt(month1)){

　　case 2:

　　if(parseInt(year1)%4==0)

　　var r=29;

　　else

　　var r=28;

　　var day=w;

　　for(var d=1;d<=r;d++){

　　body.all[day++].innerText=d;

　　if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

　　body.all[day-1].style.backgroundColor="red";

　　body.all[41].innerText="关闭";

　　}

　　break;

　　default:

　　if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12)

　　var r=31;

　　else

　　var r=30;

　　var day=w;

　　for(var d=1;d<=r;d++){

　　body.all[day++].innerText=d;

　　if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

　　body.all[day-1].style.backgroundColor="red";

　　body.all[41].innerText="关闭";

　　}

　　break;

　　}

　　}

　　var date=new Date();

　　for(var s1=0;s1<select.options.length;s1++){

　　if(parseInt(select.options[s1].text)==parseInt(date.getYear())){

　　select.options[s1].selected=true;

　　break;

　　}

　　}

　　for(var s2=0;s2<select1.options.length;s2++){

　　if(parseInt(select1.options[s2].text)==parseInt(date.getMonth())+1){

　　select1.options[s2].selected=true;

　　break;

　　}

　　}

　　select.onchange();

　　for(var i in body.all){

　　if(body.all[i].innerText==date.getDate()){

　　body.all[i].style.backgroundColor="red";

　　}

　　}

　　target.onfocus=function(){

　　document.body.appendChild(a);

　　a.style.left=target.offsetLeft+"px";;

　　a.style.top=target.offsetTop+target.offsetHeight+"px";

　　}

　　target.onblur=function(){

　　if(a && window.event.clientY>a.offsetTop && window.event.clientY<a.offsetTop+a.offsetHeight && window.event.clientX>a.offsetLeft && window.event.clientX<a.offsetLeft+a.offsetWidth)

　　return;

　　if(!a) return;

　　a.parentNode.removeChild(a);

　　}

　　body.all[41].innerText="关闭";

　　body.all[41].onclick=function(){

　　this.style.backgroundColor="";

　　a.parentNode.removeChild(a);

　　}

　　}

　　}