var strFrame; // 日历用iframe实现 document.writeln( ' <iframe id=yyDateLayer frameborder=no scrolling=no Author=yy style="position: absolute; width: 145; height: 168; z-index: 9998;display=none"></iframe> ' ) // ifram中用div定位 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: 2; left: 18;display: none"></span> ' ;strFrame += ' <span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 2; left: 75;display: none"></span> ' ;strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#808080 onselectstart="return false" Author=yy> ' ;strFrame += ' <tr> ' ;strFrame += ' <td width=142 height=23 bgcolor=#FFFFFF> ' ;strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=140 height=23 Author=yy> ' ;strFrame += ' <tr align=center> ' strFrame += ' <td width=20 Author=yy align=center bgcolor=#808080 style="font-size:12px;cursor: hand;color: #FFD700" ' ;strFrame += ' οnclick="parent.yyPrevM()" title="向前翻月" ><b Author=yy><<</b> ' ;strFrame += ' </td> ' strFrame += ' <td width=60 align=right style="font-size:12px;cursor:default" title="点击这里选择年份"> ' ;strFrame += ' <span width=60 Author=yy id=yyYearHead οnclick="parent.tmpSelectYearInnerHTML(this.innerText)"></span> 年 ' ;strFrame += ' </span> ' ;strFrame += ' <td width=48 align=left style="font-size:12px;cursor:default" title="点击这里选择月份"> ' ;strFrame += ' <span id=yyMonthHead Author=yy οnclick="parent.tmpSelectMonthInnerHTML(this.innerText)"></span> 月 ' ;strFrame += ' </td> ' ;strFrame += ' <td width=20 bgcolor=#808080 align=center style="font-size:12px;cursor: hand;color: #FFD700" ' ;strFrame += ' οnclick="parent.yyNextM()" title="往后翻月" Author=yy><b Author=yy>>></b></td></tr> ' ;strFrame += ' </table></td></tr> ' ;strFrame += ' <tr><td width=142 height=18 bgcolor=#808080> ' ;strFrame += ' <table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default"> ' ;strFrame += ' <tr align=center><td style="font-size:12px;color:#FFFFFF" Author=yy>日</td> ' ;strFrame += ' <td style="font-size:12px;color:#FFFFFF" Author=yy>一</td><td style="font-size:12px;color:#FFFFFF" Author=yy>二</td> ' ;strFrame += ' <td style="font-size:12px;color:#FFFFFF" Author=yy>三</td><td style="font-size:12px;color:#FFFFFF" Author=yy>四</td> ' ;strFrame += ' <td style="font-size:12px;color:#FFFFFF" Author=yy>五</td><td style="font-size:12px;color:#FFFFFF" Author=yy>六</td></tr> ' ;strFrame += ' </table></td></tr> ' ;strFrame += ' <tr><td width=142 height=120> ' ;strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF> ' ; 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=yyDay'+n+' style="font-size:12px" οnclick=parent.yyDayClick(this.innerText)></td>';n++; } strFrame+='</tr>';} strFrame += ' <tr align=center><td width=20 height=20 style="font-size:12px" id=yyDay35 Author=yy ' ;strFrame += ' οnclick=parent.yyDayClick(this.innerText)></td> ' ;strFrame += ' <td width=20 height=20 style="font-size:12px" id=yyDay36 Author=yy οnclick=parent.yyDayClick(this.innerText)></td> ' ;strFrame += ' <td colspan=5 align=right Author=yy><span οnclick=parent.closeLayer() style="font-size:12px;cursor: hand" ' ;strFrame += ' Author=yy><u>关闭</u></span></td></tr> ' ;strFrame += ' </table></td></tr><tr><td> ' ;strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF> ' ;strFrame += ' <tr> ' ;strFrame += ' </tr></table></td></tr></table></div> ' ;window.frames.yyDateLayer.document.writeln(strFrame); window.frames.yyDateLayer.document.close(); // 解决ie进度条不结束的问题 var outObject; var odatelayer = window.frames.yyDateLayer.document.all; // 存放日历对象 function setday(tt,obj) // 主调函数 ... { if (arguments.length > 2)...{alert("对不起!传入本控件的参数太多!");return;} if (arguments.length == 0)...{alert("对不起!您没有传回本控件任何参数!");return;} var dads = document.all.yyDateLayer.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;} dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6; dads.left = tleft; outObject = (arguments.length == 1) ? th : obj; outButton = (arguments.length == 1) ? null : th; //设定外部点击的按钮 dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6; dads.left = tleft; outObject = (arguments.length == 1) ? th : obj; dads.display = ''; event.returnValue=false;} // // 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 yyTheYear = new Date().getFullYear(); var yyTheMonth = new Date().getMonth() + 1 ; var yyWDay = new Array( 37 ); function document.onclick() ... { with(window.event.srcElement) ...{ if (getAttribute("Author")==null && tagName != "INPUT") document.all.yyDateLayer.style.display="none"; }} function yyWriteHead(yy,mm) ... { window.frames.yyDateLayer.document.all.yyYearHead.innerText = yy ; window.frames.yyDateLayer.document.all.yyMonthHead.innerText = mm; } 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 - 10; if (n < 1000) n = 1000; if (n + 26 > 9999) n = 9974; var s = "<select Author=yy name=tmpSelectYear style='font-size: 12px' " s += "οnblur='document.all.tmpSelectYearLayer.style.display="none"' " s += "οnchange='document.all.tmpSelectYearLayer.style.display="none";" s += "parent.yyTheYear = this.value; parent.yySetDay(parent.yyTheYear,parent.yyTheMonth)'> "; var selectInnerHTML = s; for (var i = n; i < n + 26; i++) ...{ if (i == m) ...{selectInnerHTML += "<option Author=yy value='" + i + "' selected>" + i + "年" + "</option> ";} else ...{selectInnerHTML += "<option Author=yy value='" + i + "'>" + i + "年" + "</option> ";} } 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 Author=yy name=tmpSelectMonth style='font-size: 12px' " s += "οnblur='document.all.tmpSelectMonthLayer.style.display="none"' " s += "οnchange='document.all.tmpSelectMonthLayer.style.display="none";" s += "parent.yyTheMonth = this.value; parent.yySetDay(parent.yyTheYear,parent.yyTheMonth)'> "; var selectInnerHTML = s; for (var i = 1; i < 13; i++) ...{ if (i == m) ...{selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"</option> ";} else ...{selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"</option> ";} } selectInnerHTML += "</select>"; odatelayer.tmpSelectMonthLayer.style.display=""; odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML; odatelayer.tmpSelectMonth.focus();} function closeLayer() ... { document.all.yyDateLayer.style.display="none"; } function document.onkeydown() ... { if (window.event.keyCode==27)document.all.yyDateLayer.style.display="none"; } function IsPinYear(year) ... { if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false; } function GetMonthCount(year,month) ... { 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 yyPrevY() ... { if(yyTheYear > 999 && yyTheYear <10000)...{yyTheYear--;} else...{alert("年份超出范围(1000-9999)!");} yySetDay(yyTheYear,yyTheMonth); } function yyNextY() ... { if(yyTheYear > 999 && yyTheYear <10000)...{yyTheYear++;} else...{alert("年份超出范围(1000-9999)!");} yySetDay(yyTheYear,yyTheMonth); } function yyToday() ... { yyTheYear = new Date().getFullYear(); yyTheMonth = new Date().getMonth()+1; yySetDay(yyTheYear,yyTheMonth); } function yyPrevM() ... { if(yyTheMonth>1)...{yyTheMonth--}else...{yyTheYear--;yyTheMonth=12;} yySetDay(yyTheYear,yyTheMonth); } function yyNextM() ... { if(yyTheMonth==12)...{yyTheYear++;yyTheMonth=1}else...{yyTheMonth++} yySetDay(yyTheYear,yyTheMonth); } function yySetDay(yy,mm) ... { yyWriteHead(yy,mm); for (var i = 0; i < 37; i++)...{yyWDay[i]=""}; var day1 = 1,firstday = new Date(yy,mm-1,1).getDay(); for (var i = firstday; day1 < GetMonthCount(yy,mm)+1; i++)...{yyWDay[i]=day1;day1++;} for (var i = 0; i < 37; i++) ...{ var da = eval("window.frames.yyDateLayer.document.all.yyDay"+i) if (yyWDay[i]!="") ...{ da.innerHTML = "<b>" + yyWDay[i] + "</b>"; da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && yyWDay[i] == new Date().getDate()) ? "#FFD700" : "#ADD8E6"; da.style.cursor="hand" } else...{da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"} }} function yyDayClick(n) ... { var yy = yyTheYear; var mm = yyTheMonth; if (mm < 10)...{mm = "0" + mm;} if (outObject) ...{ if (!n) ...{outObject.value=""; return;} if ( n < 10)...{n = "0" + n;} outObject.value= yy + "-" + mm + "-" + n ; closeLayer(); } else ...{closeLayer(); alert("您所要输出的控件对象并不存在!");}} yySetDay(yyTheYear,yyTheMonth); function show_calendar_time(str_target,str_datetime) ... { var args,urls,tmp; args = new Array(3); args[0] = str_target; args[1] = str_datetime; args[2] = self; urls = "../UserControls/Date/calendar_time.html"; if (str_datetime.length > 0)...{ var re_date = /^(d+)-(d+)-(d+)s+(d+):(d+):(d+)$/; if (re_date.exec(str_datetime))...{ urls += "?"; urls += RegExp.$1; urls += RegExp.$2; tmp = new Date (RegExp.$1, RegExp.$2-1, RegExp.$3, RegExp.$4, RegExp.$5, RegExp.$6); urls += tmp.getTime(); } } window.showModalDialog(urls, args, "dialogWidth:260px;dialogHeight:300px;help=no;");} 然后调用 < HTML > < HEAD > < title > DateSelectSample </ title > < meta name = " GENERATOR " Content = " Microsoft Visual Studio .NET 7.1 " > < meta name = " CODE_LANGUAGE " Content = " C# " > < meta name = " vs_defaultClientScript " content = " JavaScript " > < meta name = " vs_targetSchema " content = " http://schemas.microsoft.com/intellisense/ie5 " > < script src = " date.js " ></ script > </ HEAD > < body MS_POSITIONING = " GridLayout " > < form id = " Form1 " method = " post " runat = " server " > < FONT face = " 宋体 " > < asp:TextBox id = " TextBox1 " onfocus = " setday(this) " style = " Z-INDEX: 101; LEFT: 160px; POSITION: absolute; TOP: 336px " runat = " server " ></ asp:TextBox ></ FONT > </ form > </ body > </ HTML >