Calendar_HY.js /**/ /* @version 2.0.2007.06.14 */ /**/ /* @version 1.0.2004.06.13 */ /**/ /* @auther alin */ /**/ /* Email:caoailin111@sohu.com */ /**/ /* @version 2.0.2007.06.14 */ /**/ /* @auther heroying */ /**/ /* Email:heroying@gmail.com */ /**/ /* 控件使用方法: 1. 页头加入代码:<script language='javascript' src="./Calendar_HY.js" /> (此处假设页面与本文件在同一目录,否者请自行修改引用路径。) <script language='javascript'></script> 2. 触发控件中加入ONCLICK事件:οnclick="showDiv2(this)" 如已存在ONCLICK事件则只要在调用的函数里直接调用 showDiv2(this); 即可。*/ var myC_x,myC_y; var myC_timeset = null ,myC_timeset1 = null ; var divObj = null ; var inputName; // 所要填充的文本框对象全局变量。add by heroying 20070612 var setObjectName; // 全局变量:父控件的X值和Y值 var gp_otop = 0 ; var gp_oleft = 0 ; // 初始化日历 var myCalendar = new myCalendar;myCalendar.show();myCalendar.input( " txt1 " ); // showDiv2(this) function myCalendar() // 构建对象 ... { var myDate = new Date(); this.year = myDate.getFullYear(); this.month = myDate.getMonth()+1; this.date = myDate.getDate(); this.format="yyyy-mm-dd"; this.style = myStyle(1); this.show = createCalendar; this.input = createInput;} function myStyle(num) // 设置样式 ... { if(!num||isNaN(num))...{alert('参数不对,采用默认样式!');num=1;} var style = new Array(); style[1]=".week{background-color:#DfDfff;font-size:12px;width:180px;}" +".ds{width:180px;background-color:#f4f4f4;font-size:12px;cursor:hand}" +".mover{border:1px solid #909EFF;background-color:#ffffff;}" +".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}" +".tit{background-color:#909EFF;width:180px;font-size:12px;color:white;cursor:default}" +".cs{position:absolute;border:1px solid #909eff;width:182px;left:0px;top:0px;z-index:9999;}" +".shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}"; document.write("<style type='text/css'>"); document.write(style[num]); document.write("</style>");} function createCalendar() ... { var week = new Array('日','一','二','三','四','五','六'); document.write("<div class='cs' onselectstart='return false' οncοntextmenu='return false' οnmοusedοwn='if(event.button==2)this.style.display="none"' id='myC_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>"); //创建头部 //增加“清楚内容”、“关闭窗口” 2个按钮。 document.write("<table class='tit' id='myC_Top' οnmοusedοwn='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' οnmοuseup='releaseCapture();' οnmοusemοve='myCMove(this.parentElement.parentElement);'><tr><td width=10 οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='上一年份'>7</td><td title='上一月份' οnmοuseοver='this.style.color="black"' οnclick='cutMonth()' οnmοuseοut='this.style.color=""' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';divHidden(myC.parentElement.nextSibling); οnclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center οnclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='下一月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='addYear()' title='下一年份'>8</td><td style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="red"' οnmοuseοut='this.style.color=""' οnclick='if(this.innerText!="")getValue(inputName,0);myC_div.style.display="none"' title='清除内容' >y</td><td style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="red"' οnmοuseοut='this.style.color=""' οnclick='closeDiv()' title='关闭' >r</td></tr></table>"); //创建星期条目 //修改星期条目支持拖动功能,并加入鼠标变为MOVE型效果。 modify by heroying 20070614 document.write("<table class='week' style='cursor:move' id='myC_WeekTop' οnmοusedοwn='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' οnmοuseup='releaseCapture();' οnmοusemοve='myCMove(this.parentElement.parentElement);'><tr>"); for(i=0;i<7;i++) document.write("<td align=center >"+week[i]+"</td>"); document.write("</tr></table>"); //创建日期条目 document.write("<table class='ds' id='myC' cellspacing=2 cellpadding=0>"); for(i=0;i<6;i++) ...{ document.write("<tr>"); for(j=0;j<7;j++) document.write("<td width=10% height=16 align=center οnmοuseοver='mOver(this)' οnmοuseοut='mOut(this)' οnclick='if(this.innerText!="")getValue(inputName,this.innerText);myC_div.style.display="none"'></td>"); document.write("</tr>"); } document.write("</table>"); //建建水印 document.write("</div>"); //创建选择图层 document.write("<div style='position:absolute;left:0px;top:0px;z-index:3' οnmοuseοver=divShow(this) οnmοuseοut=divHidden(this)></div>"); document.write("</div>"); //显示日期 showDate(this.year,this.month); myC_div.style.display='none';} // add by heroying 20070613 function closeDiv() ... { myC_div.style.display='none';} // 修改了返回格式为:20070101 modify by heroying 20070614 function getValue(obj,value) ... { if(value==0)...{ eval(setObjectName).value=""; }else...{ var get_month = parseInt(myC_Top.cells[3].innerText); var get_day = value; get_month = get_month<10?"0"+get_month:get_month; get_day = get_day<10?"0"+get_day:get_day; //返回格式:20070101 eval(setObjectName).value = parseInt(myC_Top.cells[2].innerText)+""+get_month+get_day; //返回格式:2007-1-1 //eval(setObjectName).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value; //重新显示时显示年份、月份更新为当前系统日期信息。add by heroying 20070612 var today = new Date(); myC_Top.cells[2].innerText = today.getYear()+"年"; myC_Top.cells[3].innerText = (today.getMonth()+1)+"月"; showDate(today.getYear(),today.getMonth()+1); }} function showDate(year,month) ... { var myDate = new Date(year,month-1,1); var today = new Date(); var day = myDate.getDay(); var length = new Array(31,30,31,30,31,30,31,31,30,31,30,31); length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28; for(i=0;i<myC.cells.length;i++)myC.cells[i].innerHTML = ""; for(i=0;i<length[month-1];i++) ...{ myC.cells[i+day].innerHTML = (i+1); if(new Date(year,month-1,i+1).getDay()==6||new Date(year,month-1,i+1).getDay()==0)...{myC.cells[i+day].style.color='red';} else...{myC.cells[i+day].style.color='#000000'} //增加当前日期颜色变化(绿色) add by heroying 20070612 if(year==today.getYear()&&month==today.getMonth()+1)...{ if(new Date(year,month-1,i+1).getDate()==today.getDate())...{myC.cells[i+day].style.color='green';} } } myC_Top.cells[2].innerText=year+"年"; myC_Top.cells[3].innerText=month+"月"; with(myC.parentNode.previousSibling.style) ...{ pixelLeft=myC.offsetLeft; pixelTop=myC.offsetTop; height = myC.clientHeight; width = myC.clientWidth; } myC.parentElement.parentElement.style.height=myC.parentElement.offsetHeight; myC.parentElement.previousSibling.innerHTML=year;} // 一些附加函数-------------------- // ---------Begin------------------- function mOver(obj) ... {obj.className = 'mover';} function mOut(obj) ... {if(obj.className=='mover')obj.className = '';} function addYear() ... {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);} function addMonth() ... {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12)...{month=1;year++;}showDate(year,month);} function cutYear() ... {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);} function cutMonth() ... {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month--;if(month<1)...{month=12;year--;}showDate(year,month);} function divS(obj) ... { if(obj!=divObj) ...{ obj.style.backgroundColor="#909eff"; obj.style.color='black'; } if(divObj!=null) ...{ divObj.style.backgroundColor=''; divObj.style.color=''; } divObj = obj;} function divShow(obj) ... { if (myC_timeset!=null) clearTimeout(myC_timeset); obj.style.display='block';} function divHidden(obj) ... {myC_timeset=window.setTimeout(function()...{obj.style.display='none'},500);} function createyear(year,obj) // 创建年份选择 ... { var ystr; var oDiv; ystr="<table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">"; ystr+="<tr><td style='cursor:hand' οnclick='createyear("+(year-20)+",myC_Top.cells[2])' align=center>上翻</td></tr>"; for(i=year-10;i<year+10;i++) if(year==i) ystr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center οnclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>"; else ystr+="<tr><td align=center style='cursor:hand' οnmοuseοver=divS(this) οnclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>"; ystr+="<tr><td style='cursor:hand' οnclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center>下翻</td></tr>"; ystr+="</table>"; oDiv = myC.parentElement.nextSibling; oDiv.innerHTML=''; oDiv.innerHTML = ystr; showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);} function createmonth(month,obj) // 创建月份选择 ... { var mstr; var oDiv; mstr="<table class='move1' cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+">"; for(i=1;i<13;i++) if (month==i) mstr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center οnclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>"; else mstr+="<tr><td align=center style='cursor:hand' οnmοuseοver='divS(this)' οnclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>"; mstr+="</table>"; oDiv = myC.parentElement.nextSibling; oDiv.innerHTML=''; oDiv.innerHTML = mstr; showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);} function showDiv(obj,top,left) ... { obj.style.pixelTop=top; obj.style.pixelLeft=left;} function myCMove(obj) ... { if(event.button==1)...{ var X = obj.clientLeft; var Y = obj.clientTop; obj.style.pixelLeft= X+(event.x-myC_x); obj.style.pixelTop= Y+(event.y-myC_y); window.status=myC_y; }} // 对原来不能准确定位DIV初始位置进行修正。modify by heroying 20070614 function showDiv2(obj) ... { setObjectName = obj; inputName=obj.name; var e=obj; //每次统计父控件X、Y值前先清空历史数据。 gp_otop = 0; gp_oleft = 0; //递归统计父控件X、Y值 GetParent(e); //加上当前控件X、Y值 myC_div.style.pixelTop = gp_otop+setObjectName.offsetHeight+setObjectName.offsetTop; myC_div.style.pixelLeft = gp_oleft+setObjectName.offsetLeft; myC_div.style.display="block";} // 递归查找父控件,并累计父控件的X值和Y值.add by heroying 20070614 function GetParent(obj) ... { if(obj.offsetParent!=undefined)...{ gp_otop += obj.offsetParent.offsetTop;//累加y值 gp_oleft += obj.offsetParent.offsetLeft;//累加x值 GetParent(obj.offsetParent);//递归查找 }else...{ return; }} function createInput(name) ... { myC_div.style.display='none'; document.write("<input type='hidden' name='Calendar_HY_init'>");} // --------------End --------------------- 一个页面范例test.html < html > < head > < script src ='./Calendar_HY.js' ></ script > < script > ... var myCalendar=new myCalendar;//myCalendar.year=2006;myCalendar.show();myCalendar.input("txt1"); </ script > </ head > < body > < input type ="text" name ="test" onclick ="showDiv2(this)" readonly =true > < input type ="text" name ="test1" onclick ="showDiv2(this)" readonly =true > < input type ="text" name ="test2" onclick ="showDiv2(this)" readonly =true > < input type ="text" name ="test3" onfocus ="showDiv2(this)" readonly =true > < input type ="text" name ="test4" onfocus ="showDiv2(this)" readonly =true > < br > < br > < br > < br > < br > < br > < br > < br > < br > < input type ="text" name ="bbbb" > </ body > < html >