javascript 表单日期选择效果

2007-08-07 10:16:39 作者：

javascript 表单日期选择效果

<html> 
<head> 
<title>Agenda</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
BODY { 
    FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; 
} 
A { 
    FONT-SIZE: 9pt; TEXT-DECORATION: none; color: #000000 
} 
A:hover { 
    TEXT-DECORATION: none; color: #000000 
} 
A:link { 
    TEXT-DECORATION: none 
} 
A:visited { 
    TEXT-DECORATION: none 
} 
BR { 
    FONT-SIZE: 9pt; height: 15pt; 
} 
TD { 
    FONT-SIZE: 9pt; LINE-HEIGHT: 11pt; 
} 
input { 
    FONT-SIZE: 9pt; height: 15pt; 
} 
.SCROLLBAR { 
    SCROLLBAR-FACE-COLOR: #718698; 
    SCROLLBAR-HIGHLIGHT-COLOR: #899aa9; 
    SCROLLBAR-SHADOW-COLOR: #506981; 
    SCROLLBAR-3DLIGHT-COLOR: #5b7086; 
    SCROLLBAR-ARROW-COLOR: #506981; 
    SCROLLBAR-TRACK-COLOR: #5b7086; 
    SCROLLBAR-DARKSHADOW-COLOR: #5b7086 
} 
</style> 
<script language="JavaScript1.2"> 
 
</script> 
</head> 
<body onClick="HideDate()"> 
<p align=center>&nbsp;</p> 
<p align=center> 
<input type=text id=selDate value="" style="width: 80px" readonly><input type=button value="q" style="FONT-SIZE: 7pt; FONT-FAMILY: Wingdings 3; width: 15pt" onClick="showCalendar()"> 
</p> 
<div id="LayerDate" onClick="event.cancelBubble=true" style="position:absolute; width:300px; height:115px; z-index:1; visibility: hidden; BORDER: 1 solid black;"> 
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center"> 
  <tr>  
    <td width="40" align="center" bgcolor="#000000" nowrap>&nbsp;<input type="button" value="|" style="FONT-FAMILY: Wingdings 3;width: 20px" onClick="DateChange(false)"></td> 
    <td width="100%" align="center" bgcolor="#000000" style="color: white;FONT-WEIGHT: bold; CURSOR: default" nowrap><span id="ShowYear" onClick="YearChange()"></span>&nbsp;年&nbsp;<span id="ShowMon" onClick="MonChange()"></span>&nbsp;月</td> 
    <td width="40" align="center" bgcolor="#000000" nowrap><input type="button" value="}" style="FONT-FAMILY: Wingdings 3;width: 20px" onClick="DateChange(true)">&nbsp;</td> 
  </tr> 
  <tr>  
    <td colspan="3" align="center"> <span id="Cal_Tab"></span> </td> 
  </tr> 
  <tr>  
    <td height=30 colspan="3" valign="middle" style="cursor: default" onClick="Cal_Tab.innerHTML=Calendar(years,months-1);ShowYear.innerText=years;ShowMon.innerText=months"><image src=image/now.gif height=12>  
      <b>今天：  
      <script>document.write(years + "-" + months + "-" + days)</script> 
      </b> </td> 
  </tr> 
</table> 
</div> 
<script language="JavaScript1.2"> 
    ShowYear.innerText=years; 
    ShowMon.innerText=months; 
    Cal_Tab.innerHTML=Calendar(years,months-1); 
    ShowPlan(years,(months-1),days); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 表单日期选择效果

您可能感兴趣的文章: