JavaScript实现日历控件

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>&lt;&lt;</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>&nbsp;年&nbsp; ' ;
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>&nbsp;月 ' ;
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>&gt;&gt;</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 >