JS精美日历时间控件

1、完整日历时间控件

<script>

var bMoveable=true;

var strFrame;

document.writeln('<iframe id=endDateLayer frameborder=0 width=162 height=211 style="position: absolute; z-index: 9998; display: none"></iframe>');

strFrame='<style>';

strFrame+='INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT: #63A3E9 1px solid;';

strFrame+='BORDER-BOTTOM: #63A3E9 1px solid;BACKGROUND-COLOR: #63A3E9;font-family:宋体;}';

strFrame+='TD{FONT-SIZE: 9pt;font-family:宋体;}';

strFrame+='</style>';

strFrame+='<scr' + 'ipt>';

strFrame+='var datelayerx,datelayery;';

strFrame+='var bDrag;';

strFrame+='function document.onmousemove()';

strFrame+='{if(bDrag && window.event.button==1)';

strFrame+=' {var DateLayer=parent.document.all.endDateLayer.style;';

strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;';

strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}';

strFrame+='function DragStart()';

strFrame+='{var DateLayer=parent.document.all.endDateLayer.style;';

strFrame+=' datelayerx=window.event.clientX;';

strFrame+=' datelayery=window.event.clientY;';

strFrame+=' bDrag=true;}';

strFrame+='function DragEnd(){';

strFrame+=' bDrag=false;}';

strFrame+='</scr' + 'ipt>';

strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false">';

strFrame+='<span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>';

strFrame+='<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';

strFrame+='<span id=tmpSelectHourLayer style="z-index: 9999;position: absolute;top: 188; left: 35px;display: none"></span>';

strFrame+='<span id=tmpSelectMinuteLayer style="z-index:9999;position:absolute;top: 188; left: 77px;display: none"></span>';

strFrame+='<span id=tmpSelectSecondLayer style="z-index:9999;position:absolute;top: 188; left: 119px;display: none"></span>';

strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 >';

strFrame+=' <tr><td width=142 height=23 bgcolor=#FFFFFF>';

strFrame+=' <table border=0 cellspacing=1 cellpadding=0 width=158 height=23>';

strFrame+=' <tr align=center >';

strFrame+=' <td width=16 align=center bgcolor=#63A3E9 style="font-size:12px;cursor: hand;color: #ffffff" ';

strFrame+=' onclick="parent.meizzPrevM()" title="向前翻 1 月" ><b ><</b></td>';

strFrame+=' <td width=60 align="center" bgcolor="#63A3E9" style="font-size:12px;cursor:hand" ';

strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'"';

strFrame+=' onmouseout="style.backgroundColor=\'#63A3E9\'" ';

strFrame+=' onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))" ';

strFrame+=' title="点击这里选择年份"><span id=meizzYearHead></span></td>';

strFrame+=' <td width=48 align="center" style="font-size:12px;font-color: #ffffff;cursor:hand" ';

strFrame+=' bgcolor="#63A3E9" onmouseover="style.backgroundColor=\'#aaccf3\'" ';

strFrame+=' onmouseout="style.backgroundColor=\'#63A3E9\'" ';

strFrame+=' onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+=' title="点击这里选择月份"><span id=meizzMonthHead ></span></td>';

strFrame+=' <td width=16 bgcolor=#63A3E9 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';

strFrame+=' onclick="parent.meizzNextM()" title="向后翻 1 月" ><b >></b></td>';

strFrame+=' </tr>';

strFrame+=' </table></td></tr>';

strFrame+=' <tr><td width=142 height=18 >';

strFrame+=' <table border=0 cellspacing=0 cellpadding=2 bgcolor=#63A3E9 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'');

strFrame+=' BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF width=140 height=20 style="cursor:' + (bMoveable ? 'move':'default') + '">';

strFrame+=' <tr><td style="font-size:12px;color:#ffffff" width=20> 日</td>';

strFrame+='<td style="font-size:12px;color:#FFFFFF" > 一</td><td style="font-size:12px;color:#FFFFFF"> 二</td>';

strFrame+='<td style="font-size:12px;color:#FFFFFF" > 三</td><td style="font-size:12px;color:#FFFFFF" > 四</td>';

strFrame+='<td style="font-size:12px;color:#FFFFFF" > 五</td><td style="font-size:12px;color:#FFFFFF" > 六</td></tr>';

strFrame+='</table></td></tr>';

strFrame+=' <tr ><td width=142 height=120 >';

strFrame+=' <table border=1 cellspacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 >';

var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center >'; for (i=0;i<7;i++){

strFrame+='<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" onclick=parent.meizzDayClick(this.innerText,0)></td>';n++;}

strFrame+='</tr>';}

strFrame+=' <tr align=center >';

for (i=35;i<37;i++)strFrame+='<td width=20 height=20 id=meizzDay'+i+' style="font-size:12px" onclick="parent.meizzDayClick(this.innerText,0)"></td>';

strFrame+=' <td colspan=5 align=right style="color:#1478eb"><span onclick="parent.setNull()" style="font-size:12px;cursor: hand"';

strFrame+=' onmouseover="style.color=\'#ff0000\'" onmouseout="style.color=\'#1478eb\'" title="将日期置空">置空</span>  <span onclick="parent.meizzToday()" style="font-size:12px;cursor: hand"';

strFrame+=' onmouseover="style.color=\'#ff0000\'" onmouseout="style.color=\'#1478eb\'" title="当前日期时间">当前</span>  <span style="cursor:hand" id=evaAllOK onmouseover="style.color=\'#ff0000\'" onmouseout="style.color=\'#1478eb\'" onclick="parent.closeLayer()" title="关闭日历">关闭 </span></td></tr>';

strFrame+=' </table></td></tr><tr ><td >';

strFrame+=' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF height=22 >';

strFrame+=' <tr bgcolor="#63A3E9"><td id=bUseTimeLayer width=30 style="cursor:hand" title="点击这里启用/禁用时间"';

strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" align=center onmouseout="style.backgroundColor=\'#63A3E9\'"';

strFrame+=' onclick="parent.UseTime(this)">';

strFrame+=' <span></span></td>';

strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectHourInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" onmouseout="style.backgroundColor=\'#63A3E9\'"';

strFrame+=' title="点击这里选择时间" align=center width=42>' ;

strFrame+=' <span id=meizzHourHead></span></td>';

strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectMinuteInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" onmouseout="style.backgroundColor=\'#63A3E9\'"';

strFrame+=' title="点击这里选择时间" align=center width=42>' ;

strFrame+=' <span id=meizzMinuteHead></span></td>';

strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectSecondInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" onmouseout="style.backgroundColor=\'#63A3E9\'"';

strFrame+=' title="点击这里选择时间" align=center width=42>' ;

strFrame+=' <span id=meizzSecondHead></span></td>';

strFrame+=' </tr></table></td></tr></table></div>';

window.frames.endDateLayer.document.writeln(strFrame);

window.frames.endDateLayer.document.close(); //解决ie进度条不结束的问题

//==================================================== WEB 页面显示部分 ======================================================

var outObject;

var outButton; //点击的按钮

var outDate=""; //存放对象的日期

var bUseTime=false; //是否使用时间

var odatelayer=window.frames.endDateLayer.document.all; //存放日历对象

var odatelayer=window.endDateLayer.document.all;

//odatelayer.bUseTimeLayer.innerText="NO";

bImgSwitch();

odatelayer.bUseTimeLayer.innerHTML=bImg;

function setday(tt,obj) //主调函数

{

if (arguments.length > 2){alert("对不起！传入本控件的参数太多！");return;}

if (arguments.length == 0){alert("对不起！您没有传回本控件任何参数！");return;}

var dads = document.all.endDateLayer.style;

var th = tt;

var ttop = tt.offsetTop; //TT控件的定位点高

var thei = tt.clientHeight; //TT控件本身的高

var tleft = tt.offsetLeft; //TT控件的定位点宽

var ttyp = tt.type; //TT控件的类型

while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}

var cw = document.getElementById('endDateLayer').clientWidth, ch = document.getElementById('endDateLayer').clientHeight;

var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;

if (document.body.clientHeight + dt - ttop - thei >= ch) dads.top = (ttyp=="image")? ttop + thei : ttop + thei + 6;

else dads.top = (ttop - dt < ch) ? ((ttyp=="image")? ttop + thei : ttop + thei + 6) : ttop - ch;

if (dw + dl - tleft >= cw) dads.left = tleft; else dads.left = (dw >= cw) ? dw - cw + dl : dl;

//while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}

//dads.top = (ttyp=="image") ? ttop+thei : ttop+thei+6;

//dads.left = tleft;

outObject = (arguments.length == 1) ? th : obj;

outButton = (arguments.length == 1) ? null : th; //设定外部点击的按钮

//根据当前输入框的日期显示日历的年月

var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/; //不含时间

var r = outObject.value.match(reg);

if(r!=null){

r[2]=r[2]-1;

var d=new Date(r[1],r[2],r[3]);

if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3])

{

outDate=d;

parent.meizzTheYear = r[1];

parent.meizzTheMonth = r[2];

parent.meizzTheDate = r[3];

}

else

{

outDate="";

}

meizzSetDay(r[1],r[2]+1);

}

else

{

outDate="";

meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);

}

dads.display = '';

//判断初始化时是否使用时间,非严格验证

//if (outObject.value.length>10)

//{

bUseTime=true;

bImgSwitch();

odatelayer.bUseTimeLayer.innerHTML=bImg;

meizzWriteHead(meizzTheYear,meizzTheMonth);

//}

//else

//{

// bUseTime=false;

// bImgSwitch();

// odatelayer.bUseTimeLayer.innerHTML=bImg;

// meizzWriteHead(meizzTheYear,meizzTheMonth);

//}

try

{

event.returnValue=false;

}

catch (e)

{

//此处排除错误，错误原因暂未找到。

}

}

var MonHead = new Array(12); //定义阳历中每个月的最大天数

MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;

MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var meizzTheYear=new Date().getFullYear(); //定义年的变量的初始值

var meizzTheMonth=new Date().getMonth()+1; //定义月的变量的初始值

var meizzTheDate=new Date().getDate(); //定义日的变量的初始值

var meizzTheHour=new Date().getHours(); //定义小时变量的初始值

var meizzTheMinute=new Date().getMinutes();//定义分钟变量的初始值

var meizzTheSecond=new Date().getSeconds();//定义秒变量的初始值

var meizzWDay=new Array(37); //定义写日期的数组

function document.onclick() //任意点击时关闭该控件 //ie6的情况可以由下面的切换焦点处理代替

{

with(window.event)

{

if (srcElement != outObject && srcElement != outButton)

closeLayer();

}

}

function document.onkeyup() //按Esc键关闭，切换焦点关闭

{

if (window.event.keyCode==27){

if(outObject)outObject.blur();

closeLayer();

}

else if(document.activeElement)

{

if(document.activeElement != outObject && document.activeElement != outButton)

{

closeLayer();

}

}

}

function meizzWriteHead(yy,mm,ss) //往 head 中写入当前的年与月

{

odatelayer.meizzYearHead.innerText = yy + " 年";

odatelayer.meizzMonthHead.innerText = format(mm) + " 月";

//插入当前小时、分

odatelayer.meizzHourHead.innerText=bUseTime?(meizzTheHour+" 时"):"";

odatelayer.meizzMinuteHead.innerText=bUseTime?(meizzTheMinute+" 分"):"";

odatelayer.meizzSecondHead.innerText=bUseTime?(meizzTheSecond+" 秒"):"";

}

function tmpSelectYearInnerHTML(strYear) //年份的下拉框

{

if (strYear.match(/\D/)!=null){alert("年份输入参数不是数字！");return;}

var m = (strYear) ? strYear : new Date().getFullYear();

if (m < 1000 || m > 9999) {alert("年份值不在 1000 到 9999 之间！");return;}

var n = m - 50;

if (n < 1000) n = 1000;

if (n + 101 > 9999) n = 9974;

var s = " <select name=tmpSelectYear style='font-size: 12px' "

s += "onblur='document.all.tmpSelectYearLayer.style.display=\"none\"' "

s += "onchange='document.all.tmpSelectYearLayer.style.display=\"none\";"

s += "parent.meizzTheYear = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>\r\n";

var selectInnerHTML = s;

for (var i = n; i < n + 101; i++)

{

if (i == m) { selectInnerHTML += "<option value='" + i + "' selected>" + i + "年" + "</option>\r\n"; }

else { selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "</option>\r\n"; }

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectYearLayer.style.display="";

odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectYear.focus();

}

function tmpSelectMonthInnerHTML(strMonth) //月份的下拉框

{

if (strMonth.match(/\D/)!=null){alert("月份输入参数不是数字！");return;}

var m = (strMonth) ? strMonth : new Date().getMonth() + 1;

var s = "   <select name=tmpSelectMonth style='font-size: 12px' "

s += "onblur='document.all.tmpSelectMonthLayer.style.display=\"none\"' "

s += "onchange='document.all.tmpSelectMonthLayer.style.display=\"none\";"

s += "parent.meizzTheMonth = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>\r\n";

var selectInnerHTML = s;

for (var i = 1; i < 13; i++)

{

if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"</option>\r\n"; }

else { selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"</option>\r\n"; }

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectMonthLayer.style.display="";

odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectMonth.focus();

}

/***** 增加 小时、分钟 ***/

function tmpSelectHourInnerHTML(strHour) //小时的下拉框

{

if (!bUseTime){return;}

if (strHour.match(/\D/)!=null){alert("小时输入参数不是数字！");return;}

var m = (strHour) ? strHour : new Date().getHours();

var s = "<select name=tmpSelectHour style='font-size: 12px' "

s += "onblur='document.all.tmpSelectHourLayer.style.display=\"none\"' "

s += "onchange='document.all.tmpSelectHourLayer.style.display=\"none\";"

s += "parent.meizzTheHour = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>\r\n";

var selectInnerHTML = s;

for (var i = 0; i < 24; i++)

{

if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }

else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectHourLayer.style.display="";

odatelayer.tmpSelectHourLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectHour.focus();

}

function tmpSelectMinuteInnerHTML(strMinute) //分钟的下拉框

{

if (!bUseTime){return;}

if (strMinute.match(/\D/)!=null){alert("分钟输入参数不是数字！");return;}

var m = (strMinute) ? strMinute : new Date().getMinutes();

var s = "<select name=tmpSelectMinute style='font-size: 12px' "

s += "onblur='document.all.tmpSelectMinuteLayer.style.display=\"none\"' "

s += "onchange='document.all.tmpSelectMinuteLayer.style.display=\"none\";"

s += "parent.meizzTheMinute = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>\r\n";

var selectInnerHTML = s;

for (var i = 0; i < 60; i++)

{

if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }

else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectMinuteLayer.style.display="";

odatelayer.tmpSelectMinuteLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectMinute.focus();

}

function tmpSelectSecondInnerHTML(strSecond) //秒的下拉框

{

if (!bUseTime){return;}

if (strSecond.match(/\D/)!=null){alert("分钟输入参数不是数字！");return;}

var m = (strSecond) ? strSecond : new Date().getMinutes();

var s = "<select name=tmpSelectSecond style='font-size: 12px' "

s += "onblur='document.all.tmpSelectSecondLayer.style.display=\"none\"' "

s += "onchange='document.all.tmpSelectSecondLayer.style.display=\"none\";"

s += "parent.meizzTheSecond = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute,parent.meizzTheSecond);'>\r\n";

var selectInnerHTML = s;

for (var i = 0; i < 60; i++)

{

if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }

else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectSecondLayer.style.display="";

odatelayer.tmpSelectSecondLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectSecond.focus();

}

function closeLayer() //这个层的关闭

{

var o = document.getElementById("endDateLayer");

if (o != null)

{

o.style.display="none";

}

}

function showLayer() //这个层的关闭

{

document.all.endDateLayer.style.display="";

}

function IsPinYear(year) //判断是否闰平年

{

if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;

}

function GetMonthCount(year,month) //闰年二月为29天

{

var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;

}

function GetDOW(day,month,year) //求某天的星期几

{

var dt=new Date(year,month-1,day).getDay()/7; return dt;

}

function meizzPrevY() //往前翻 Year

{

if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;}

else{alert("年份超出范围（1000-9999）！");}

meizzSetDay(meizzTheYear,meizzTheMonth);

}

function meizzNextY() //往后翻 Year

{

if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear++;}

else{alert("年份超出范围（1000-9999）！");}

meizzSetDay(meizzTheYear,meizzTheMonth);

}

function setNull()

{

outObject.value = '';

closeLayer();

}

function meizzToday() //Today Button

{

parent.meizzTheYear = new Date().getFullYear();

parent.meizzTheMonth = new Date().getMonth()+1;

parent.meizzTheDate = new Date().getDate();

parent.meizzTheHour = new Date().getHours();

parent.meizzTheMinute = new Date().getMinutes();

parent.meizzTheSecond = new Date().getSeconds();

var meizzTheSecond = new Date().getSeconds();

if (meizzTheMonth<10 && meizzTheMonth.length<2) //格式化成两位数字

{

parent.meizzTheMonth="0"+parent.meizzTheMonth;

}

if (parent.meizzTheDate<10 && parent.meizzTheDate.length<2) //格式化成两位数字

{

parent.meizzTheDate="0"+parent.meizzTheDate;

}

//meizzSetDay(meizzTheYear,meizzTheMonth);

if(outObject)

{

if (bUseTime)

{

outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" +

format(parent.meizzTheDate) + " " + format(parent.meizzTheHour) + ":" +

format(parent.meizzTheMinute) + ":" + format(parent.meizzTheSecond);

//注：在这里你可以输出改成你想要的格式

}

else

{

outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" +

format(parent.meizzTheDate); //注：在这里你可以输出改成你想要的格式

}

}

closeLayer();

}

function meizzPrevM() //往前翻月份

{

if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;}

meizzSetDay(meizzTheYear,meizzTheMonth);

}

function meizzNextM() //往后翻月份

{

if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++}

meizzSetDay(meizzTheYear,meizzTheMonth);

}

// TODO: 整理代码

function meizzSetDay(yy,mm) //主要的写程序**********

{

meizzWriteHead(yy,mm);

//设置当前年月的公共变量为传入值

meizzTheYear=yy;

meizzTheMonth=mm;

for (var i = 0; i < 37; i++){meizzWDay[i]=""}; //将显示框的内容全部清空

var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几

for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1 //上个月的最后几天

for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++) { meizzWDay[i]=day1;day1++; }

for (i=firstday+GetMonthCount(yy,mm);i<37;i++) { meizzWDay[i]=day2;day2++; }

for (i = 0; i < 37; i++)

{

var da = eval("odatelayer.meizzDay"+i) //书写新的一个月的日期星期排列

if (meizzWDay[i]!="")

{

//初始化边框

da.borderColorLight="#63A3E9";

da.borderColorDark="#63A3E9";

da.style.color="#1478eb";

if(i<firstday) //上个月的部分

{

da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>";

da.title=(mm==1?12:mm-1) +"月" + meizzWDay[i] + "日";

da.onclick=Function("meizzDayClick(this.innerText,-1)");

if(!outDate)

da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() &&

(mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?

"#5CEFA0":"#f5f5f5";

else

{

da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 &&

meizzWDay[i]==outDate.getDate())? "#84C1FF" :

(((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 &&

meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5");

//将选中的日期显示为凹下去

if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 &&

meizzWDay[i]==outDate.getDate())

{

da.borderColorLight="#FFFFFF";

da.borderColorDark="#63A3E9";

}

}

}

else if (i>=firstday+GetMonthCount(yy,mm)) //下个月的部分

{

da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>";

da.title=(mm==12?1:mm+1) +"月" + meizzWDay[i] + "日";

da.onclick=Function("meizzDayClick(this.innerText,1)");

if(!outDate)

da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() &&

(mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?

"#5CEFA0":"#f5f5f5";

else

{

da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 &&

meizzWDay[i]==outDate.getDate())? "#84C1FF" :

(((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 &&

meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5");

//将选中的日期显示为凹下去

if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 &&

meizzWDay[i]==outDate.getDate())

{

da.borderColorLight="#FFFFFF";

da.borderColorDark="#63A3E9";

}

}

}

else //本月的部分

{

da.innerHTML="<b>" + meizzWDay[i] + "</b>";

da.title=mm +"月" + meizzWDay[i] + "日";

da.onclick=Function("meizzDayClick(this.innerText,0)"); //给td赋予onclick事件的处理

//如果是当前选择的日期，则显示亮蓝色的背景；如果是当前日期，则显示暗黄色背景

if(!outDate)

da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?

"#5CEFA0":"#f5f5f5";

else

{

da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())?

"#84C1FF":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?

"#5CEFA0":"#f5f5f5");

//将选中的日期显示为凹下去

if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())

{

da.borderColorLight="#FFFFFF";

da.borderColorDark="#63A3E9";

}

}

}

da.style.cursor="hand"

}

else { da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"; }

}

}

function meizzDayClick(n,ex) //点击显示框选取日期，主输入函数*************

{

parent.meizzTheDate=n;

var yy=meizzTheYear;

var mm = parseInt(meizzTheMonth)+ex; //ex表示偏移量，用于选择上个月份和下个月份的日期

var hh=meizzTheHour;

var mi=meizzTheMinute;

var se=meizzTheSecond;

//判断月份，并进行对应的处理

if(mm<1){

yy--;

mm=12+mm;

}

else if(mm>12){

yy++;

mm=mm-12;

}

if (mm < 10) {mm = "0" + mm;}

if (hh<10) {hh="0" + hh;} //时

if (mi<10) {mi="0" + mi;} //分

if (se<10) {se="0" + se;} //秒

if (outObject)

{

if (!n) { //outObject.value="";

return;}

if ( n < 10){n = "0" + n;}

WriteDateTo(yy,mm,n,hh,mi,se);

closeLayer();

if (bUseTime)

{

try

{

outButton.click();

}

catch (e)

{

setday(outObject);

}

}

}

else {closeLayer(); alert("您所要输出的控件对象并不存在！");}

}

function format(n) //格式化数字为两位字符表示

{

var m=new String();

var tmp=new String(n);

if (n<10 && tmp.length<2)

{

m="0"+n;

}

else

{

m=n;

}

return m;

}

function evaSetTime() //设置用户选择的小时、分钟

{

odatelayer.meizzHourHead.innerText=meizzTheHour+" 时";

odatelayer.meizzMinuteHead.innerText=meizzTheMinute+" 分";

odatelayer.meizzSecondHead.innerText=meizzTheSecond+" 秒";

WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)

}

function evaSetTimeNothing() //设置时间控件为空

{

odatelayer.meizzHourHead.innerText="";

odatelayer.meizzMinuteHead.innerText="";

odatelayer.meizzSecondHead.innerText="";

WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)

}

function evaSetTimeNow() //设置时间控件为当前时间

{

odatelayer.meizzHourHead.innerText=new Date().getHours()+" 时";

odatelayer.meizzMinuteHead.innerText=new Date().getMinutes()+" 分";

odatelayer.meizzSecondHead.innerText=new Date().getSeconds()+" 秒";

meizzTheHour = new Date().getHours();

meizzTheMinute = new Date().getMinutes();

meizzTheSecond = new Date().getSeconds();

WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)

}

function UseTime(ctl)

{

bUseTime=!bUseTime;

if (bUseTime)

{

bImgSwitch();

ctl.innerHTML=bImg;

evaSetTime(); //显示时间，用户原来选择的时间

//evaSetTimeNow(); //显示当前时间

}

else

{

bImgSwitch();

ctl.innerHTML=bImg;

evaSetTimeNothing();

}

}

function WriteDateTo(yy,mm,n,hh,mi,se)

{

if (bUseTime)

{

outObject.value= yy + "-" + format(mm) + "-" + format(n) + " " + format(hh) + ":" + format(mi) + ":" + format(se); //注：在这里你可以输出改成你想要的格式

}

else

{

outObject.value= yy + "-" + format(mm) + "-" + format(n); //注：在这里你可以输出改成你想要的格式

}

}

function bImgSwitch()

{

if (bUseTime)

{

bImg="开启";

}

else

{

bImg="关闭";

}

}

</script>

<br><br><br><br><br><br><br><br>

<input type="text" name="test" onfocus="setday(this)" readonly=true>

2、精致日历控件

<script>

/* alin */

/* Email:caoailin111@sohu.com */

/* QQ:38062022 */

/* Creation date: 2004-6-13 */

var myC_x,myC_y;

var myC_timeset=null,myC_timeset1=null;

var divObj=null;

var inputName;

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:140px;}"

+".ds{width:140px;font-size:12px;cursor:hand}"

+".mover{border:1px solid black;background-color:#f4f4f4;}"

+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"

+".tit{background-color:#909EFF;width:140px;font-size:12px;color:white;cursor:default}"

+".cs{position:absolute;border:1px solid #909eff;width:142px;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' oncontextmenu='return false' onmousedown='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'>");

//创建头部

document.write("<table class='tit' id='myC_Top' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><tr><td width=10 onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' onmouseover='this.style.color=\"black\"' onclick='cutMonth()' onmouseout='this.style.color=\"\"' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling); onclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center onclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='addYear()' title='增加年份'>8</td></tr></table>");

//创建星期条目

document.write("<table class='week'><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 onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='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' onmouseover=divShow(this) onmouseout=divHidden(this)></div>");

document.write("</div>");

//显示日期

showDate(this.year,this.month);

myC_div.style.display='none';

}

function getValue(obj,value)

{

eval(obj).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value;

}

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';}

}

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' onclick='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 onclick='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' onmouseover=divS(this) onclick='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' onclick='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 onclick='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' onmouseover='divS(this)' onclick='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;

}

}

function showDiv2(obj)

{

inputName=obj.name;

var e=obj;

var ot = obj.offsetTop;

var ol=obj.offsetLeft;

while(obj=obj.parentElement){ot+=obj.offsetTop;ol+=obj.offsetLeft;}

myC_div.style.pixelTop=ot+e.offsetHeight;

myC_div.style.pixelLeft=ol;

myC_div.style.display="block";

}

function createInput(name)

{myC_div.style.display='none';

document.write("<input type='text' name='"+name+"' size=20 onfocus='showDiv2(this)'>");

}

// --------------End ---------------------

</script>

<script>

var myCalendar=new myCalendar;

myCalendar.year=2006;

myCalendar.show();

myCalendar.input("txt1");

</script>

<input type="text" name="test" onfocus="showDiv2(this)" readonly=true>

3、柔和版日历时间控件

<script language=javascript>

document.write("<div align='center' id=meizzCalendarLayer style='BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 5px; Z-INDEX: 999999; BACKGROUND: #ffffff; FILTER: Alpha(opacity=85); LEFT: 205px; PADDING-BOTTOM: 5px; BORDER-LEFT: #000000 1px solid; WIDTH: 215px; LINE-HEIGHT: 5px; PADDING-TOP: 5px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; TOP: 220px; HEIGHT: 215px; display: none'>");

document.write("<iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div>");

function writeIframe()

{

var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+

"*{font-size: 12px; font-family: 宋体}"+

"</style></head><body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'><form name=meizz>";

if (WebCalendar.drag){ strIframe += "<scr"+"ipt language=javascript>"+

"var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+

"if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+

"o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+

"o.style.top = parseInt(o.style.top) + window.event.clientY-cy;}}"+

"function document.onkeydown(){ switch(window.event.keyCode){ case 27 : parent.hiddenCalendar(); break;"+

"case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+

"case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;}"+

"function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr"+"ipt>"}

strIframe += "<select name=tmpYearSelect onblur='parent.hiddenSelect(this)' style='z-index:1;position:absolute;top:3;left:40;display:none'"+

" onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+

"<select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:3;left:110;display:none'"+

" onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+

"<select name=tmpHourSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:179;left:35;display:none'"+

" onchange='parent.WebCalendar.thisHour=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+

"<select name=tmpMinuteSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:179;left:80;display:none'"+

" onchange='parent.WebCalendar.thisMinute=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+

"<select name=tmpSecondSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:179;left:125;display:none'"+

" onchange='parent.WebCalendar.thisSecond=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+

"<table id=tableMain border='1' cellpadding='0' cellspacing='0' bordercolor='#C0D0E8' bordercolorlight='#C0D0E8' bordercolordark='#C0D0E8' width='100%' height='100%'>"+

"<tr><td height=19 bgcolor='"+ WebCalendar.lightColor +"'>"+

" <table width='98%' id=tableHead border=0 cellspacing=1 cellpadding=0 align='center'><tr align=center>"+

" <td title='向前翻 1 年' onclick='parent.prevY()' style='cursor: hand' class=bg><<</td>"+

" <td width=15 height=19 class=bg title='向前翻 1 月' style='cursor: hand' onclick='parent.prevM()'><</td>"+

" <td width=60 id=meizzYearHead title='点击此处选择年份' onclick='parent.funYearSelect(parseInt(this.innerText, 10))'"+

" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+

" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+

" <td width=50 id=meizzYearMonth title='点击此处选择月份' onclick='parent.funMonthSelect(parseInt(this.innerText, 10))'"+

" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+

" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+

" <td width=15 class=bg title='向后翻 1 月' onclick='parent.nextM()' style='cursor: hand'>></td>"+

" <td title='向后翻 1 年' onclick='parent.nextY()' style='cursor: hand' class=bg>>></td>"+

"</tr></table>"+

"</td></tr><tr><td height=20 align='center'><table id=tableWeek border=1 width='98%' cellpadding=0 cellspacing=0 ";

if(WebCalendar.drag){strIframe += "onmousedown='dragStart()' onmouseup='drag=false' onmouseout='drag=false'";}

strIframe += " borderColorLight='#FFFFFF' borderColorDark='#FFFFFF'>"+

" <tr align=center bgcolor='#6699FF'><td height=20><font color='#FF0000'>日</font></td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td><font color='#FF0000'>六</font></td></tr></table>"+

"</td></tr><tr><td valign=top align='center' bgcolor='"+ WebCalendar.lightColor +"'>"+

" <table id=tableDay height='100%' width='98%' border=0 cellspacing=1 cellpadding=0>";

for(var x=0; x<5; x++){ strIframe += "<tr>";

for(var y=0; y<7; y++) strIframe += "<td class=out id='meizzDay"+ (x*7+y) +"'></td>"; strIframe += "</tr>";}

strIframe += "<tr>";

for(var x=35; x<39; x++) strIframe += "<td class=out id='meizzDay"+ x +"'></td>";

strIframe +="<td colspan=3 class=out title='"+ WebCalendar.regInfo +"'><input style=' background-color: "+

WebCalendar.btnBgColor +";cursor: hand; padding-top: 4px; width: 100%; height: 100%; border: 0' onfocus='this.blur()'"+

" type=button value=' 关闭' onclick='parent.hiddenCalendar()'></td></tr></table>"+

"</td></tr><tr><td height=20 align='center' bgcolor='"+ WebCalendar.lightColor +"'>"+

" <table border=0 cellpadding=1 cellspacing=0 width='98%'>"+

" <tr>"+

" <td width=15 height=19 title='向前翻 1 小时' onclick='parent.prevH()' style='cursor: hand' class=bg><<</td>"+

" <td width=15 height=19 title='向前翻 1 分钟' onclick='parent.prevMi()' style='cursor: hand' class=bg><</td>"+

" <td width=60 id=meizzHourHead title='点击此处选择小时' onclick='parent.funHourSelect(parseInt(this.innerText, 10))'"+

" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+

" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+

" <td width=50 id=meizzMinuteHead title='点击此处选择分钟' onclick='parent.funMinuteSelect(parseInt(this.innerText, 10))'"+

" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+

" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+

" <td width=50 id=meizzSecondHead title='点击此处选择秒' onclick='parent.funSecondSelect(parseInt(this.innerText, 10))'"+

" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+

" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+

" <td title='向后翻 1 分钟' onclick='parent.nextMi()' style='cursor: hand' class=bg>></td>"+

" <td title='向后翻 1 小时' onclick='parent.nextH()' style='cursor: hand' class=bg>>></td>"+

"</tr></table>"+

"</td></tr><table></form></body></html>";

with(WebCalendar.iframe)

{

document.writeln(strIframe); document.close();

for(var i=0; i<39; i++)

{

WebCalendar.dayObj[i] = eval("meizzDay"+ i);

WebCalendar.dayObj[i].onmouseover = dayMouseOver;

WebCalendar.dayObj[i].onmouseout = dayMouseOut;

WebCalendar.dayObj[i].onclick = returnDate;

}

}

}

function WebCalendar() //初始化日历的设置

{

this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

this.day = new Array(39); //定义日历展示用的数组

this.dayObj = new Array(39); //定义日期展示控件数组

this.dateStyle = null; //保存格式化后日期数组

this.objExport = null; //日历回传的显示控件

this.eventSrc = null; //日历显示的触发控件

this.inputDate = null; //转化外的输入的日期(d/m/yyyy)

this.thisYear = new Date().getFullYear(); //定义年的变量的初始值

this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值

this.thisDay = new Date().getDate(); //定义日的变量的初始值

this.thisHour = new Date().getHours(); //定义小时得变量初始值

this.thisMinute = new Date().getMinutes(); //定义分钟得变量初始值

this.thisSecond = new Date().getSeconds(); //定义秒得标量的初始值

this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)

this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体

this.calendar = getObjectById("meizzCalendarLayer"); //日历的层

this.dateReg = ""; //日历格式验证的正则式

this.yearFall = 50; //定义年下拉框的年差值

this.format = "yyyy-mm-dd"; //回传日期的格式

this.timeShow = true; //是否返回时间

this.drag = false; //是否允许拖动

this.darkColor = "#0000D0"; //控件的暗色

this.lightColor = "#FFFFFF"; //控件的亮色

this.btnBgColor = "#E6E6FA"; //控件的按钮背景色

this.wordColor = "#000080"; //控件的文字颜色

this.wordDark = "#DCDCDC"; //控件的暗文字颜色

this.dayBgColor = "#F5F5FA"; //日期数字背景色

this.todayColor = "#FF0000"; //今天在日历上的标示背景色

this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色

} var WebCalendar = new WebCalendar();

function calendar() //主调函数

{

var e = window.event.srcElement; writeIframe();

var o = WebCalendar.calendar.style; WebCalendar.eventSrc = e;

if (arguments.length == 0) WebCalendar.objExport = e;

else WebCalendar.objExport = eval(arguments[0]);

WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? "move" : "default";

var t = e.offsetTop, h = e.clientHeight, l = e.offsetLeft, p = e.type;

while (e = e.offsetParent){t += e.offsetTop; l += e.offsetLeft;}

o.display = ""; WebCalendar.iframe.document.body.focus();

var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight;

var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;

if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6;

else o.top = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;

if (dw + dl - l >= cw) o.left = l; else o.left = (dw >= cw) ? dw - cw + dl : dl;

if (!WebCalendar.timeShow) WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;

else WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;

try{

if (WebCalendar.objExport.value.trim() != ""){

WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);

if (WebCalendar.dateStyle == null)

{

WebCalendar.thisYear = new Date().getFullYear();

WebCalendar.thisMonth = new Date().getMonth()+ 1;

WebCalendar.thisDay = new Date().getDate();

alert("原文本框里的日期有错误！\n可能与你定义的显示时分秒有冲突！");

writeCalendar(); return false;

}

else

{

WebCalendar.thisYear = parseInt(WebCalendar.dateStyle[1], 10);

WebCalendar.thisMonth = parseInt(WebCalendar.dateStyle[3], 10);

WebCalendar.thisDay = parseInt(WebCalendar.dateStyle[4], 10);

WebCalendar.inputDate = parseInt(WebCalendar.thisDay, 10) +"/"+ parseInt(WebCalendar.thisMonth, 10) +"/"+

parseInt(WebCalendar.thisYear, 10); writeCalendar();

}

} else writeCalendar();

} catch(e){writeCalendar();}

}

function funMonthSelect() //月份的下拉框

{

var m = isNaN(parseInt(WebCalendar.thisMonth, 10)) ? new Date().getMonth() + 1 : parseInt(WebCalendar.thisMonth);

var e = WebCalendar.iframe.document.forms[0].tmpMonthSelect;

for (var i=1; i<13; i++) e.options.add(new Option(i +"月", i));

e.style.display = ""; e.value = m; e.focus(); window.status = e.style.top;

}

function funYearSelect() //年份的下拉框

{

var n = WebCalendar.yearFall;

var e = WebCalendar.iframe.document.forms[0].tmpYearSelect;

var y = isNaN(parseInt(WebCalendar.thisYear, 10)) ? new Date().getFullYear() : parseInt(WebCalendar.thisYear);

y = (y <= 1000)? 1000 : ((y >= 9999)? 9999 : y);

var min = (y - n >= 1000) ? y - n : 1000;

var max = (y + n <= 9999) ? y + n : 9999;

min = (max == 9999) ? max-n*2 : min;

max = (min == 1000) ? min+n*2 : max;

for (var i=min; i<=max; i++) e.options.add(new Option(i +"年", i));

e.style.display = ""; e.value = y; e.focus();

}

function funHourSelect() //小时的下拉框

{

var e = WebCalendar.iframe.document.forms[0].tmpHourSelect;

var h = isNaN(parseInt(WebCalendar.thisHour, 10)) ? new Date().getHours() : parseInt(WebCalendar.thisHour);

for (var i=0; i<=23; i++) e.options.add(new Option(appendZero(i) +"时", i));

e.style.display = ""; e.value = h; e.focus();

}

function funMinuteSelect() //分钟的下拉框

{

var e = WebCalendar.iframe.document.forms[0].tmpMinuteSelect;

var mi = isNaN(parseInt(WebCalendar.thisMinute, 10)) ? new Date().getMinutes() : parseInt(WebCalendar.thisMinute);

for (var i=0; i<=59; i++) e.options.add(new Option(appendZero(i) +"分", i));

e.style.display = ""; e.value = mi; e.focus();

}

function funSecondSelect() //秒的下拉框

{

var e = WebCalendar.iframe.document.forms[0].tmpSecondSelect;

var s = isNaN(parseInt(WebCalendar.thisSecond, 10)) ? new Date().getSecondes() : parseInt(WebCalendar.thisSecond);

for (var i=0; i<=59; i++) e.options.add(new Option(appendZero(i) +"秒", i));

e.style.display = ""; e.value = s; e.focus();

}

function prevM() //往前翻月份

{

WebCalendar.thisDay = 1;

if (WebCalendar.thisMonth==1)

{

WebCalendar.thisYear--;

WebCalendar.thisMonth=13;

}

WebCalendar.thisMonth--; writeCalendar();

}

function nextM() //往后翻月份

{

WebCalendar.thisDay = 1;

if (WebCalendar.thisMonth==12)

{

WebCalendar.thisYear++;

WebCalendar.thisMonth=0;

}

WebCalendar.thisMonth++; writeCalendar();

}

function prevH() //往前翻小时

{

WebCalendar.thisHour--;

if(WebCalendar.thisHour==-1)

{

WebCalendar.thisHour=23;

}

writeCalendar();

}

function nextH() //往后翻小时

{

WebCalendar.thisHour++;

if(WebCalendar.thisHour==24)

{

WebCalendar.thisHour=0;

}

writeCalendar();

}

function prevMi() //往前翻小时

{

WebCalendar.thisMinute--;

if(WebCalendar.thisMinute==-1)

{

WebCalendar.thisMinute=59;

}

writeCalendar();

}

function nextMi() //往后翻小时

{

WebCalendar.thisMinute++;

if(WebCalendar.thisMinute==60)

{

WebCalendar.thisMinute=0;

}

writeCalendar();

}

function prevY(){WebCalendar.thisDay = 1; WebCalendar.thisYear--; writeCalendar();}//往前翻 Year

function nextY(){WebCalendar.thisDay = 1; WebCalendar.thisYear++; writeCalendar();}//往后翻 Year

function hiddenSelect(e){for(var i=e.options.length; i>-1; i--)e.options.remove(i); e.style.display="none";}

function getObjectById(id){ if(document.all) return(eval("document.all."+ id)); return(eval(id)); }

function hiddenCalendar(){getObjectById("meizzCalendarLayer").style.display = "none";};

function appendZero(n){return(("00"+ n).substr(("00"+ n).length-2));}//日期自动补零程序

function String.prototype.trim(){return this.replace(/(^\s*)|(\s*$)/g,"");}

function dayMouseOver()

{

this.className = "over";

this.style.backgroundColor = WebCalendar.darkColor;

if(WebCalendar.day[this.id.substr(8)].split("/")[1] == WebCalendar.thisMonth)

this.style.color = WebCalendar.lightColor;

}

function dayMouseOut()

{

this.className = "out"; var d = WebCalendar.day[this.id.substr(8)], a = d.split("/");

this.style.removeAttribute('backgroundColor');

if(a[1] == WebCalendar.thisMonth && d != WebCalendar.today)

{

if(WebCalendar.dateStyle && a[0] == parseInt(WebCalendar.dateStyle[4], 10))

this.style.color = WebCalendar.lightColor;

this.style.color = WebCalendar.wordColor;

}

}

function writeCalendar() //对日历显示的数据的处理程序

{

var y = WebCalendar.thisYear;

var m = WebCalendar.thisMonth;

var d = WebCalendar.thisDay;

var h = WebCalendar.thisHour;

var mi = WebCalendar.thisMinute;

var s = WebCalendar.thisSecond;

WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28;

if (!(y<=9999 && y >= 1000 && parseInt(m, 10)>0 && parseInt(m, 10)<13 && parseInt(d, 10)>0)){

alert("对不起，你输入了错误的日期！");

WebCalendar.thisYear = new Date().getFullYear();

WebCalendar.thisMonth = new Date().getMonth()+ 1;

WebCalendar.thisDay = new Date().getDate();

WebCalendar.thisHour = new Date().getHours();

WebCalendar.thisMinute = new Date().getMinutes();

WebCalendar.thisSecond = new Date().getSeconds();

}

y = WebCalendar.thisYear;

m = WebCalendar.thisMonth;

d = WebCalendar.thisDay;

h = WebCalendar.thisHour;

mi = WebCalendar.thisMinute;

s = WebCalendar.thisSecond;

WebCalendar.iframe.meizzYearHead.innerText = y +" 年";

WebCalendar.iframe.meizzYearMonth.innerText = parseInt(m, 10) +" 月";

WebCalendar.iframe.meizzHourHead.innerText =appendZero(parseInt(h, 10)) +" 时";

WebCalendar.iframe.meizzMinuteHead.innerText =appendZero(parseInt(mi, 10)) +" 分";

WebCalendar.iframe.meizzSecondHead.innerText =appendZero(parseInt(s, 10))+" 秒";

WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28; //闰年二月为29天

var w = new Date(y, m-1, 1).getDay();

var prevDays = m==1 ? WebCalendar.daysMonth[11] : WebCalendar.daysMonth[m-2];

for(var i=(w-1); i>=0; i--) //这三个 for 循环为日历赋数据源（数组 WebCalendar.day）格式是 d/m/yyyy

{

WebCalendar.day[i] = prevDays +"/"+ (parseInt(m, 10)-1) +"/"+ y;

if(m==1) WebCalendar.day[i] = prevDays +"/"+ 12 +"/"+ (parseInt(y, 10)-1);

prevDays--;

}

for(var i=1; i<=WebCalendar.daysMonth[m-1]; i++) WebCalendar.day[i+w-1] = i +"/"+ m +"/"+ y;

for(var i=1; i<39-w-WebCalendar.daysMonth[m-1]+1; i++)

{

WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ (parseInt(m, 10)+1) +"/"+ y;

if(m==12) WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ 1 +"/"+ (parseInt(y, 10)+1);

}

for(var i=0; i<39; i++) //这个循环是根据源数组写到日历里显示

{

var a = WebCalendar.day[i].split("/");

WebCalendar.dayObj[i].innerText = a[0];

WebCalendar.dayObj[i].title = a[2] +"-"+ appendZero(a[1]) +"-"+ appendZero(a[0]);

WebCalendar.dayObj[i].bgColor = WebCalendar.dayBgColor;

WebCalendar.dayObj[i].style.color = WebCalendar.wordColor;

if ((i<10 && parseInt(WebCalendar.day[i], 10)>20) || (i>27 && parseInt(WebCalendar.day[i], 10)<12))

WebCalendar.dayObj[i].style.color = WebCalendar.wordDark;

if (WebCalendar.inputDate==WebCalendar.day[i]) //设置输入框里的日期在日历上的颜色

{WebCalendar.dayObj[i].bgColor = WebCalendar.darkColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}

if (WebCalendar.day[i] == WebCalendar.today) //设置今天在日历上反应出来的颜色

{WebCalendar.dayObj[i].bgColor = WebCalendar.todayColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}

}

}

function returnDate() //根据日期格式等返回用户选定的日期

{

if(WebCalendar.objExport)

{

var returnValue;

var a = (arguments.length==0) ? WebCalendar.day[this.id.substr(8)].split("/") : arguments[0].split("/");

var d = WebCalendar.format.match(/^(\w{4})(-|\/)(\w{1,2})\2(\w{1,2})$/);

if(d==null){alert("你设定的日期输出格式不对！\r\n\r\n请重新定义 WebCalendar.format ！"); return false;}

var flag = d[3].length==2 || d[4].length==2; //判断返回的日期格式是否要补零

returnValue = flag ? a[2] +d[2]+ appendZero(a[1]) +d[2]+ appendZero(a[0]) : a[2] +d[2]+ a[1] +d[2]+ a[0];

if(WebCalendar.timeShow)

{

var h = WebCalendar.thisHour, m = WebCalendar.thisMinute, s = WebCalendar.thisSecond;

returnValue += flag ? " "+ appendZero(h) +":"+ appendZero(m) +":"+ appendZero(s) : " "+ h +":"+ m +":"+ s;

}

WebCalendar.objExport.value = returnValue;

hiddenCalendar();

}

}

function document.onclick()

{

if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();

}

</script>

<br>

<br><br><br>><br><br>

                                <input type="text" name="test" onfocus="calendar()" readonly=true>

4、CS版日历时间控件

<script>

var calendar=this;

var calendarTime;

this.calendarPad=null;

this.prevMonth=null;

this.nextMonth=null;

this.prevYear=null;

this.nextYear=null;

this.goToday=null;

this.calendarClose=null;

this.calendarAbout=null;

this.head=null;

this.body=null;

this.today=[];

this.currentDate=[];

this.sltDate;

this.target;

this.source;

this.time;

this.target2 = null;

this.isForward = false;

this.addCalendarPad=function()

{

document.write("<div id='divCalendarpad' style='position:absolute;top:0;left:0;width:246;height:170;display:none;'>");

document.write("<iframe frameborder='0' height='100%' width='100%'></iframe>");

document.write("<div style='position:absolute;top:1;left:1;width:100%;height:100%;background-color:#336699;'></div>");

document.write("</div>");

calendar.calendarPad=document.all.divCalendarpad;

}

function DateIsTrue(asDate)

{

var lsDate = asDate + "";

var loDate = lsDate.split("-");

if (loDate.length!=3) return false;

var liYear = parseFloat(loDate[0]);

var liMonth = parseFloat(loDate[1]);

var liDay = parseFloat(loDate[2]);

if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2)) return false;

if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay)) return false;

if ((liYear<1800)||(liYear>2500)) return false;

if ((liMonth>12)||(liMonth<=0)) return false;

if (GetThisDays(liYear,liMonth)<liDay) return false;

return !isNaN(Date.UTC(liYear,liMonth,liDay));

}

this.addCalendarBoard=function()

{

var BOARD=this;

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

calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);

divBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;border:1 outset;background-color:buttonface;";

var tbBoard=document.createElement("table");

divBoard.insertAdjacentElement("beforeEnd",tbBoard);

tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10;font-size:9pt;";

tbBoard.cellPadding=0;

tbBoard.cellSpacing=1;

tbBoard.bgColor="#333333";

trRow = tbBoard.insertRow(0);

calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");

calendar.calendarAbout.onclick=function()

{

calendar.about();

}

tbCell=trRow.insertCell(1);

tbCell.colSpan=5;

tbCell.bgColor="#99CCFF";

tbCell.align="center";

tbCell.style.cssText = "cursor:default;font-family: Tahoma;font-size: 12pt;";

calendar.head = tbCell;

tbCell=trRow.insertCell(2);

calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");

calendar.calendarClose.title="关闭";

calendar.calendarClose.onclick=function()

{

calendar.hide();

}

trRow = tbBoard.insertRow(1);

calendar.prevYear = calendar.insertTbCell(trRow,0,"<<","center");

calendar.prevYear.title="上一年";

calendar.prevYear.onmousedown=function()

{

calendar.currentDate[0]--;

calendar.showCalendar(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

}

calendar.prevMonth = calendar.insertTbCell(trRow,1,"<","center");

calendar.prevMonth.title="上一月";

calendar.prevMonth.onmousedown=function()

{

calendar.currentDate[1]--;

if(calendar.currentDate[1]==0)

{

calendar.currentDate[1]=12;

calendar.currentDate[0]--;

}

calendar.showCalendar(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

}

calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);

calendar.goToday.title="选择今天";

calendar.goToday.onclick=function()

{

var x_today=new Date();

calendar.currentDate[0]=x_today.getFullYear();

calendar.currentDate[1]=x_today.getMonth()+1;

calendar.currentDate[2]=x_today.getDate();

calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];

calendar.target.value=calendar.sltDate + " " + calendarTime.getTime();;

calendar.hide();

}

calendar.nextMonth = calendar.insertTbCell(trRow,3,">","center");

calendar.nextMonth.title="下一月";

calendar.nextMonth.onmousedown=function()

{

calendar.currentDate[1]++;

if(calendar.currentDate[1]==13)

{

calendar.currentDate[1]=1;

calendar.currentDate[0]++;

}

calendar.showCalendar(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

}

calendar.nextYear = calendar.insertTbCell(trRow,4,">>","center");

calendar.nextYear.title="下一年";

calendar.nextYear.onmousedown=function()

{

calendar.currentDate[0]++;

calendar.showCalendar(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

}

trRow = tbBoard.insertRow(2);

var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");

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

{

tbCell=trRow.insertCell(i)

tbCell.innerText=cnDateName[i];

tbCell.align="center";

tbCell.width=35;

tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";

}

trRow = tbBoard.insertRow(3);

tbCell=trRow.insertCell(0);

tbCell.colSpan=7;

tbCell.height=83;

tbCell.vAlign="top";

tbCell.bgColor="#F0F0F0";

var tbBody=document.createElement("table");

tbCell.insertAdjacentElement("beforeEnd",tbBody);

tbBody.style.cssText="position:relative;top:0;left:0;width:100%;height:100%;font-size:9pt;"

tbBody.cellPadding=0;

tbBody.cellSpacing=0;

calendar.body=tbBody;

trRow = tbBoard.insertRow(4);

tbCell=trRow.insertCell(0);

tbCell.colSpan=7;

tbCell.height=20;

tbCell.vAlign="top";

tbCell.bgColor="#F0F0F0";

var tbBodyTime=document.createElement("table");

tbCell.insertAdjacentElement("beforeEnd",tbBodyTime);

tbBodyTime.style.cssText="position:relative;top:0;left:0;width:100%;height:100%;font-size:9pt;"

tbBodyTime.cellPadding=0;

tbBodyTime.cellSpacing=0;

calendar.time=tbBodyTime;

}

this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan)

{

var tbCell=trRow.insertCell(cellIndex);

if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;

var btnCell=document.createElement("button");

tbCell.insertAdjacentElement("beforeEnd",btnCell);

btnCell.value=TXT;

btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";

btnCell.onmouseover=function()

{

btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";

}

btnCell.onmouseout=function()

{

btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";

}

btnCell.onmousedown=function()

{

btnCell.style.cssText="width:100%;border:1 inset;background-color:&H000000FF&;";

}

btnCell.onmouseup=function()

{

btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";

}

btnCell.onclick=function()

{

btnCell.blur();

}

return btnCell;

}

this.setDefaultDate=function()

{

var dftDate=new Date();

calendar.today[0]=dftDate.getYear();

calendar.today[1]=dftDate.getMonth()+1;

calendar.today[2]=dftDate.getDate();

}

this.showCalendar=function(targetObject,defaultDate,sourceObject,targetObject2,isForward)

{

if(targetObject==undefined)

{

alert("未设置目标对像. \n方法: ATCALENDAR.showCalendar(obj 目标对像,string 默认日期,obj 点击对像);\n\n目标对像:接受日期返回值的对像.\n默认日期:格式为\"yyyy-mm-dd\",缺省为当日日期.\n点击对像:点击这个对像弹出calendar,默认为目标对像.\n");

return false;

}

else calendar.target=targetObject;

if (targetObject2 !=undefined && targetObject2 != null)

calendar.target2=targetObject2;

if (isForward != undefined && isForward != null)

calendar.isForward = isForward;

if(sourceObject==undefined) calendar.source=calendar.target;

else calendar.source=sourceObject;

var firstDay;

var Cells=new Array();

if (targetObject.value.length > 0 && (defaultDate==undefined || defaultDate==""))

{

defaultDate = targetObject.value;

}

if(defaultDate==undefined || defaultDate=="")

{

var theDate=new Array();

calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];

theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];

}

else

{

var theDateTime = defaultDate.split(" ");

var theDate=theDateTime[0].split("-");

calendar.head.innerText = theDateTime[0];

defaultDate = theDateTime[0];

}

calendar.currentDate[0]=theDate[0];

calendar.currentDate[1]=theDate[1];

calendar.currentDate[2]=theDate[2];

theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);

theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);

calendar.calendarPad.style.display="";

var theRows = Math.ceil((theMonthLen)/7);

while (calendar.body.rows.length > 0)

{

calendar.body.deleteRow(0)

}

var n=0;day=0;

for(i=0;i<theRows;i++)

{

theRow=calendar.body.insertRow(i);

for(j=0;j<7;j++)

{

n++;

if(n>theFirstDay && n<=theMonthLen)

{

day=n-theFirstDay;

calendar.insertBodyCell(theRow,j,day);

}

else

{

var theCell=theRow.insertCell(j);

theCell.style.cssText="background-color:#F0F0F0;cursor:default;";

}

}

}

while (calendar.time.rows.length > 0)

{

calendar.time.deleteRow(0)

}

theRow = calendar.time.insertRow(0);

var theCell=theRow.insertCell(0);

theCell.style.cssText="background-color:#F0F0F0;cursor:default;text-align: center;";

calendarTime = null;

calendarTime = new minute(calendar.source.id, calendar.source);

theCell.innerHTML = calendarTime.toString();

var offsetPos=calendar.getAbsolutePos(calendar.source);

if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight)

{

var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;

}

else

{

var calTop=offsetPos.y+calendar.source.offsetHeight;

}

if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth)

{

var calLeft=offsetPos.x;

}

else

{

var calLeft=document.body.offsetWidth-calendar.calendarPad.style.pixelWidth-20;

}

calendar.calendarPad.style.pixelLeft=calLeft;

calendar.calendarPad.style.pixelTop=calTop;

}

this.getAbsolutePos = function(el)

{

var r = { x: el.offsetLeft, y: el.offsetTop };

if (el.offsetParent)

{

var tmp = calendar.getAbsolutePos(el.offsetParent);

r.x += tmp.x;

r.y += tmp.y;

}

return r;

};

this.insertBodyCell=function(theRow,j,day,targetObject)

{

var theCell=theRow.insertCell(j);

if(j==0) var theBgColor="#FF9999";

else var theBgColor="#FFFFFF";

if(day==calendar.currentDate[2]) var theBgColor="#facdaa";

if(day==calendar.today[2]) var theBgColor="#99FFCC";

theCell.bgColor=theBgColor;

theCell.innerText=day;

theCell.align="center";

theCell.width=35;

theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";

theCell.onmouseover=function()

{

theCell.bgColor="#FFFFCC";

theCell.style.cssText="border:1 outset;cursor:hand;";

}

theCell.onmouseout=function()

{

theCell.bgColor=theBgColor;

theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";

}

theCell.onmousedown=function()

{

theCell.bgColor="#FFFFCC";

theCell.style.cssText="border:1 inset;cursor:hand;";

}

theCell.onclick=function()

{

if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];

if(day.toString().length<2) day="0"+day;

calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;

calendar.target.value=calendar.sltDate + " " + calendarTime.getTime();

calendar.hide();

}

}

this.getFirstDay=function(theYear, theMonth)

{

var firstDate = new Date(theYear,theMonth-1,1);

return firstDate.getDay();

}

this.getMonthLen=function(theYear, theMonth)

{

theMonth--;

var oneDay = 1000 * 60 * 60 * 24;

var thisMonth = new Date(theYear, theMonth, 1);

var nextMonth = new Date(theYear, theMonth + 1, 1);

var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);

return len;

}

this.hide=function()

{

calendar.calendarPad.style.display="none";

}

this.setup=function(defaultDate)

{

calendar.addCalendarPad();

calendar.addCalendarBoard();

calendar.setDefaultDate();

}

this.about=function()

{

}

calendar.setup();

this.minute = function(fName,obj)

{

this.fName = fName;

this.timer = null;

this.fObj = null;

this.toString = function()

{

var objDate = new Date();

if (obj.value.length > 0)

{

var theDateTime = obj.value.split(" ");

var theDate=theDateTime[0].split("-");

var theTime = theDateTime[1].split(":");

objDate.setFullYear(theDate[0]);

objDate.setMonth(theDate[1]);

objDate.setDate(theDate[2]);

objDate.setHours(theTime[0]);

objDate.setMinutes(theTime[1]);

objDate.setSeconds(theTime[2]);

}

var sMinute_Common = "style='width: 18px;height: 14px;border: 0px solid black;font-family: Tahoma;font-size: 9px;text-align: right;ime-mode:disabled' maxlength='2' id='txtcalendarTime' name='calendarTime' onfocus='calendarTime.setFocusObj(this)' onblur='calendarTime.setTime(this)' onkeyup='calendarTime.prevent(this)' onkeypress='if (!/[0-9]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0' onpaste='return false' ondragenter='return false'";

var sButton_Common = "style='width: 16px;height: 8px;font-family: Webdings;font-size: 7px;line-height: 2px;padding-left: 2px;cursor: default' onfocus='this.blur()' onmouseup='calendarTime.controlTime()' disabled"

var str = "";

str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"

str += " <tr>"

str += " <td>"

str += " <span style='vertical-align:middle;font-family: Arial;font-size: 10pt;'>时间：</span>"

str += " </td>"

str += " <td>"

str += " <div style=\"border-left: 2px inset #D4D0C8;border-top: 2px inset #D4D0C8;border-right: 2px inset #FFFFFF;border-bottom: 2px inset #FFFFFF;width: 100px;height: 19px;background-color: #FFFFFF;overflow: hidden;text-align: right;font-family: Tahoma;font-size: 10px;\">"

str += " <input radix=\"24\" value=\""+this.formatTime(objDate.getHours())+"\" "+sMinute_Common+">:"

str += " <input radix=\"60\" value=\""+this.formatTime(objDate.getMinutes())+"\" "+sMinute_Common+">:"

str += " <input radix=\"60\" value=\""+this.formatTime(objDate.getSeconds())+"\" "+sMinute_Common+">"

str += " </div>"

str += " </td>"

str += " <td>"

str += " <table border=\"0\" cellspacing=\"2\" cellpadding=\"0\">"

str += " <tr><td><button id=\""+this.fName+"_up\" "+sButton_Common+">5</button></td></tr>"

str += " <tr><td><button id=\""+this.fName+"_down\" "+sButton_Common+">6</button></td></tr>"

str += " </table>"

str += " </td>"

str += " </tr>"

str += "</table>"

return str;

}

this.play = function()

{

this.timer = setInterval("calendarTime.playback()",1000);

}

this.formatTime = function(sTime)

{

sTime = ("0"+sTime);

return sTime.substr(sTime.length-2);

}

this.playback = function()

{

var objDate = new Date();

var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()];

var objMinute = document.getElementsByID(this.fName);

for (var i=0;i<objMinute.length;i++)

{

objMinute[i].value = this.formatTime(arrDate[i])

}

}

this.prevent = function(obj)

{

clearInterval(this.timer);

this.setFocusObj(obj);

var value = parseInt(obj.value,10);

var radix = parseInt(obj.radix,10)-1;

if (obj.value>radix||obj.value<0)

{

obj.value = obj.value.substr(0,1);

}

}

this.controlTime = function(cmd)

{

event.cancelBubble = true;

if (!this.fObj) return;

clearInterval(this.timer);

var cmd = event.srcElement.innerText=="5"?true:false;

var i = parseInt(this.fObj.value,10);

var radix = parseInt(this.fObj.radix,10)-1;

if (i==radix&&cmd)

{

i = 0;

}

else if (i==0&&!cmd)

{

i = radix;

}

else

{

cmd?i++:i--;

}

this.fObj.value = this.formatTime(i);

this.fObj.select();

}

this.setTime = function(obj)

{

obj.value = this.formatTime(obj.value);

}

this.setFocusObj = function(obj)

{

eval(this.fName+"_up").disabled = eval(this.fName+"_down").disabled = false;

this.fObj = obj;

}

this.getTime = function()

{

var arrTime = new Array(2);

for (var i=0;i<document.getElementsByName("calendarTime").length;i++)

{

arrTime[i] = document.getElementsByName("calendarTime")[i].value;

}

return arrTime.join(":");

}

}

</script>

<input type="text" name="test" onfocus="showCalendar(this)" readonly=true>