JavaScript显示时间下拉列表

<table cellSpacing="0" cellPadding="0" width="90%" border="0"
    align="center">
    <tr height="25">
     <td style="HEIGHT: 25px" width="1"></td>
     <td id=bar1
      style="BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; HEIGHT: 25px; background: url('../images/maillistbutton1.gif');"
      align=center width=90>
      <span style="color: #ffffff">&nbsp;</span><A class="Newbutton"
       href="Default.aspx?FolderType=1"><span style="color: #ffffff">个人考勤</span>
      </A>
     </td>
     <td class=Newbutton id=bar2
      style="BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; HEIGHT: 25px; background: url('../images/maillistbutton2.gif');"
      align=center width=90>
      &nbsp;
      <A class="Newbutton" href="Default.aspx?FolderType=2"><span
       style="color: #ffffff">请假登记</span> </A>
     </td>
     <td id=bar3
      style="BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; HEIGHT: 25px; background: url('../images/maillistbutton1.gif');"
      align=center width=90>
      &nbsp;
      <A class="Newbutton" href="Default.aspx?FolderType=3"><span
       style="color: #ffffff">待办请假单</span> </A>
     </td>
     <td id=bar4
      style="BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; HEIGHT: 25px; background: url('../images/maillistbutton1.gif');"
      align=center width=90>
      &nbsp;
      <A class="Newbutton" href="Default.aspx?FolderType=4"><span
       style="color: #ffffff">已办请假单</span> </A>
     </td>
     <td style="HEIGHT: 25px" align="right">
      <FONT face="宋体">&nbsp; </FONT>
     </td>
    </tr>
   </table>

   <div id="pHoliday" style="width: 100%;">

    <table id="tabLeave" align="center" border="1" bordercolor="#93bee2"
     cellpadding="1" cellspacing="1" class="GBText"
     style="border-collapse: collapse" width="90%">
     <tbody>
      <tr>
       <td align="center" bgcolor="#0099cc" colspan="2"
        style="height: 20px">
        <font color="#ffffff" face="宋体">请 假 单</font>
       </td>
      </tr>
      <tr>
       <td align="center" style="width: 52px; height: 32px">
        <font face="宋体"></font>
       </td>
       <td style="height: 32px">
        <font face="宋体">批假人： <select name="ddlName" id="ddlName"
          style="width: 120px;">
          <option value="819">
           总经理
          </option>
          <option value="820">
           部门经理
          </option>
          <option value="823">
           财务主管
          </option>
          <option value="860">
           张玉莲
          </option>

         </select> 请假类型： <select name="ddlType" id="ddlType"
          style="width: 120px;">
          <option value="事假">
           事假
          </option>
          <option value="病假">
           病假
          </option>
          <option value="产假">
           产假
          </option>
          <option value="婚假">
           婚假
          </option>
          <option value="丧假">
           丧假
          </option>

         </select> </font>
       </td>
      </tr>
      <tr>
       <td align="center" style="width: 52px; height: 28px">
        <font face="宋体">事由：</font>
       </td>
       <td style="height: 28px">
        <font face="宋体"> <input name="tbReason" type="text"
          id="tbReason" class="InputCss" style="width: 448px;" />&nbsp;</font>
       </td>
      </tr>
      <tr>
       <td align="center" style="width: 52px; height: 23px">
        <font face="宋体">时间：</font>
       </td>
       <td style="height: 23px">
        <font face="宋体">开始： <input id="tbBeginDate"
          name="tbBeginDate" class="InputCss" type="text" readonly=true
          onclick="javascript:this.focus()"
          onFocus="fPopCalendar(this,this,PopCal); return false;"
          style="cursor: hand" /> <script language="JavaScript">
 var gdCtrl = new Object();
 var gcGray = "#808080";
 var gcToggle = "highlight";
 var gcBG = "threedface";
 var gMonths = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
 var gdCurDate = new Date();
 var giYear = gdCurDate.getFullYear();
 var giMonth = gdCurDate.getMonth()+1;
 var giDay = gdCurDate.getDate();
 var sxYear = giYear;
 var sxMonth = giMonth;
 var sxDay = giDay;
 var sxDatestr = gdCtrl.value;
 if (sxDatestr != ""){
 var sxDate = new Date(sxDatestr);
 sxYear = sxDate.getFullYear();
 }
 var VicPopCal = new Object();
 function mouseover(obj){
 obj.style.borderTop = 'buttonshadow 1px solid';
 obj.style.borderLeft = 'buttonshadow 1px solid';
 obj.style.borderRight = 'buttonhighlight 1px solid';
 obj.style.borderBottom = 'buttonhighlight 1px solid';
 }
 function mouseout(obj){
 obj.style.borderTop = 'buttonhighlight 1px solid';
 obj.style.borderLeft = 'buttonhighlight 1px solid';
 obj.style.borderRight = 'buttonshadow 1px solid';
 obj.style.borderBottom = 'buttonshadow 1px solid';
 }
 function mousedown(obj){
 obj.style.borderTop = 'buttonshadow 1px solid';
 obj.style.borderLeft = 'buttonshadow 1px solid';
 obj.style.borderRight = 'buttonhighlight 1px solid';
 obj.style.borderBottom = 'buttonhighlight 1px solid';
 }
 function mouseup(obj){
 obj.style.borderTop = 'buttonhighlight 1px solid';
 obj.style.borderLeft = 'buttonhighlight 1px solid';
 obj.style.borderRight = 'buttonshadow 1px solid';
 obj.style.borderBottom = 'buttonshadow 1px solid';
 }
 function fPopCalendar(popCtrl, dateCtrl, popCal){
 VicPopCal = popCal;
 gdCtrl = dateCtrl;
 fSetYearMon(giYear, giMonth);
 var point = fGetXY(popCtrl);
 with (VicPopCal.style) {left = point.x;top  = point.y+popCtrl.offsetHeight+1;visibility = 'visible';}
 VicPopCal.focus();
 }
 function fSetDate(iYear, iMonth, iDay){
 if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
 gdCtrl.value = "";
 }
 else{
 if (iMonth < 10){iMonth = "0"+iMonth;}
 if (iDay < 10){iDay = "0"+iDay;}
 gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
 }
 VicPopCal.style.visibility = "hidden";
 }
 function fSetSelected(aCell){
 var iOffset = 0;
 var iYear = parseInt(document.all.tbSelYear.value);
 var iMonth = parseInt(document.all.tbSelMonth.value);
 aCell.bgColor = gcBG;
 with (aCell.children["cellText"]){
 var iDay = parseInt(innerText);
 if (color==gcGray){iOffset = (Victor<10)?-1:1;}
 iMonth += iOffset;
 if (iMonth<1) { iYear--; iMonth = 12;}else{if (iMonth>12){iYear++;iMonth = 1;}}
 }
 fSetDate(iYear, iMonth, iDay);
 }
 function Point(iX, iY){this.x = iX;this.y = iY;}
 function fBuildCal(iYear, iMonth){
 var aMonth=new Array();
 for(i=1;i<7;i++){aMonth[i]=new Array(i);}
 var dCalDate=new Date(iYear, iMonth-1, 1);
 var iDayOfFirst=dCalDate.getDay();
 var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
 var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
 var iDate = 1;
 var iNext = 1;
 for (d = 0; d < 7; d++){aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;}
 for (w = 2; w < 7; w++){for (d = 0; d < 7; d++){aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);}}
 return aMonth;
 }
 function fDrawCal(iYear, iMonth, iDay, iCellWidth, iDateTextSize) {
 var WeekDay = new Array("日","一","二","三","四","五","六");
 var styleTD = " bgcolor='"+gcBG+"' width='"+iCellWidth+"' bordercolor='"+gcBG+"' valign='middle' align='center' style='font-size: 12px;background: buttonface;border-top: buttonhighlight 1px solid;border-left: buttonhighlight 1px solid;border-right: buttonshadow 1px solid; border-bottom: buttonshadow 1px solid;";
 with (document) {
 write("<tr align='center'>");
 for(i=0; i<7; i++){write("<td height='20' "+styleTD+"color:#990099' >" + WeekDay[i] + "</td>");}
 write("</tr>");
 for (w = 1; w < 7; w++) {
 write("<tr align='center'>");
 for (d = 0; d < 7; d++) {
 write("<td width='10%' height='15' id=calCell "+styleTD+"cursor:hand;' onmouseover='mouseover(this)' onmouseout='mouseout(this)' onmousedown='mousedown(this)' onmouseup='mouseup(this)' onclick='fSetSelected(this)'>");
 write("<font style='font-size: 13px;' id=cellText Victor='Liming Weng'> </font>");
 write("</td>");
 }
 write("</tr>");
 }
 }
 }
 function fUpdateCal(iYear, iMonth) {
 sxYear = iYear;
 sxMonth = iMonth;
 yeartd1.innerText = sxYear + "年";
 monthtd1.innerText = gMonths[sxMonth-1];
 myMonth = fBuildCal(iYear, iMonth);
 var i = 0;
 for (w = 0; w < 6; w++){
 for (d = 0; d < 7; d++){
 with (cellText[(7*w)+d]) {
 Victor = i++;
 if (myMonth[w+1][d]<0) {
 color = gcGray;
 innerText = -myMonth[w+1][d];
 }else{
 color = ((d==0)||(d==6))?"red":"black";
 innerText = myMonth[w+1][d];
 }
 }
 }
 }
 }
 function fSetYearMon(iYear, iMon){
 sxYear = iYear;
 sxMonth = iMon;
 yeartd1.innerText = sxYear + "年";
 monthtd1.innerText = gMonths[sxMonth-1];
 document.all.tbSelMonth.options[iMon-1].selected = true;
 for (i = 0; i < document.all.tbSelYear.length; i++){
 if (document.all.tbSelYear.options[i].value == iYear){
 document.all.tbSelYear.options[i].selected = true;
 }
 }
 fUpdateCal(iYear, iMon);
 }
 function fPrevMonth(){
 var iMon = document.all.tbSelMonth.value;
 var iYear = document.all.tbSelYear.value;
 if (--iMon<1) {
 iMon = 12;
 iYear--;
 }
 fSetYearMon(iYear, iMon);
 }
 function fNextMonth(){
 var iMon = document.all.tbSelMonth.value;
 var iYear = document.all.tbSelYear.value;
 if (++iMon>12) {
 iMon = 1;
 iYear++;
 }
 fSetYearMon(iYear, iMon);
 }
 function fGetXY(aTag){
 var oTmp = aTag;
 var pt = new Point(0,0);
 do {
 pt.x += oTmp.offsetLeft;
 pt.y += oTmp.offsetTop;
 oTmp = oTmp.offsetParent;
 } while(oTmp.tagName!="BODY");
 return pt;
 }
 with (document){
 write("<Div id='PopCal' onclick='event.cancelBubble=true' style='POSITION:absolute; VISIBILITY: hidden; bordercolor:#000000;border:2px ridge;width:10;z-index:100;'>");
 write("<iframe frameBorder=0 width=180 scrolling=no height=170></iframe>")
 write("<table id='popTable' border='1' bgcolor='#eeede8' cellpadding='0' cellspacing='0' style='font-size:12px;Z-INDEX:202;position:absolute;top:0;left:0;'>");
 write("<tr>");
 write("<td valign='middle' align='center' style='cursor:default'>");
 write("<table width='176' border='0' cellpadding='0' cellspacing='0'>");
 write("<tr align='center'>");
 write("<td height='22' width='20' name='PrevMonth' style='font-family:\"webdings\";font-size:15px' onClick='fPrevMonth()' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>3</td>");
 write("<td width='64' id='yeartd1' style='font-size:12px' onmouseover='yeartd1.style.display=\"none\";yeartd2.style.display=\"\";' onmouseout='this.style.background=\"\"'>");
 write(sxYear + "年");
 write("</td>");
 write("<td width='64' id='yeartd2' style='display:none' onmouseout='yeartd2.style.display=\"none\";yeartd1.style.display=\"\";'>");
 write("<SELECT style='width:64px;font-size: 12px;font-family: 宋体;' id='tbSelYear' onChange='fUpdateCal(document.all.tbSelYear.value, document.all.tbSelMonth.value);yeartd2.style.display=\"none\";yeartd1.style.display=\"\";' Victor='Won'>");
 for(i=1930;i<2015;i++){
 write("<OPTION value='"+i+"'>"+i+"年</OPTION>");
 }
 write("</SELECT>");
 write("</td>");
 write("<td width='72' id='monthtd1' style='font-size:12px' onmouseover='monthtd1.style.display=\"none\";monthtd2.style.display=\"\";' onmouseout='this.style.background=\"\"'>");
 write(gMonths[sxMonth-1]);
 write("</td>");
 write("<td width='72' id='monthtd2' style='display:none' onmouseout='monthtd2.style.display=\"none\";monthtd1.style.display=\"\";'>");
 write("<select style='width:72px;font-size: 12px;font-family: 宋体;' id='tbSelMonth' onChange='fUpdateCal(document.all.tbSelYear.value, document.all.tbSelMonth.value);monthtd2.style.display=\"none\";monthtd1.style.display=\"\";' Victor='Won'>");
 for (i=0; i<12; i++){
 write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
 }
 write("</SELECT>");
 write("</td>");
 write("<td width='20' name='PrevMonth' style='font-family:\"webdings\";font-size:15px' onclick='fNextMonth()' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>4</td>");
 write("</tr>");
 write("</table>");
 write("</td></tr><tr><td align='center'>");
 write("<DIV style='background-color:teal;'><table width='100%' border='0' bgcolor='threedface' cellpadding='0' cellspacing='0'>");
 fDrawCal(giYear, giMonth, giDay, 19, 14);
 write("</table></DIV>");
 write("</td></tr><tr><TD height='20' align='center' valign='bottom'>");
 write("<font style='cursor:hand;font-size:12px' onclick='fSetDate(0,0,0)' onMouseOver='this.style.color=\"#0033FF\"' onMouseOut='this.style.color=0'>清空</font>");
 write("&nbsp;&nbsp;&nbsp;&nbsp;");
 write("<font style='cursor:hand;font-size:12px' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=\"#0033FF\"' onMouseOut='this.style.color=0'>今天: "+giYear+"-"+giMonth+"-"+giDay+"</font>");
 write("</TD></tr></TD></tr></TABLE>");
 write("</Div>");
 }
 </script> <SCRIPT event=onclick() for=document>PopCal.style.visibility = 'hidden';</SCRIPT>

         <span style="color: Red;"><input id="rb1" type="radio"
           name="am" value="rb1" checked="checked" /> <label for="rb1">
           上午
          </label> </span><span style="color: Red;"><input id="rbm" type="radio"
           name="am" value="rbm" /> <label for="rbm">
           下午
          </label> </span> --结束： <input id="tbEndDate" name="tbEndDate"
          class="InputCss" type="text" readonly=true
          onclick="javascript:this.focus()"
          onFocus="fPopCalendar(this,this,PopCal); return false;"
          style="cursor: hand" /> <span style="color: Red;"><input
           id="rba" type="radio" name="pm" value="rba" /> <label
           for="rba">
           上午
          </label> </span><span style="color: Red;"><input id="rb2" type="radio"
           name="pm" value="rb2" checked="checked" /> <label for="rb2">
           下午
          </label> </span> </font>
       </td>
      </tr>
      <tr>
       <td align="center" style="width: 52px; height: 31px">
        <font face="宋体"></font>
       </td>
       <td align="center" style="height: 31px">
        <font face="宋体"> <input type="submit" name="btnQj"
          value="请假" id="btnQj" class="greenButtonCss"
          style="width: 80px;" /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
         &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</font>
       </td>
      </tr>
     </tbody>
    </table>