zx.html

一个很实用的javascript脚本日历

  date2.inputName = "date"; //input的name。
  date2.inputValue = "today";  //你会看到，input中将显示客户机系统当前时间。
  date2.inputSize = 10;  //input的size
  date2.inputClass = "";  //input的class，这样你就能自己控制input的样式。
  date2.color = "#000080";  //选择按钮、面板的边框以及日历中字的颜色。
  date2.bgColor = "#EEEEFF";  //选择按钮、面板的背景色。
  date2.buttonWidth = 60;  //按钮宽度
  date2.buttonWords = "选择日期";  //按钮显示的文字。
  date2.canEdits = false;  //input是否可以输入
  date2.hidesSelects = true;  //显增日期选择面板时是否隐藏页面中的select控件。
  date2.display();
</SCRIPT>

<TABLE style="DISPLAY: inline" cellSpacing=1 cellPadding=0>
<TBODY>
<TR>
<TD><INPUT readOnly maxLength=10 size=10 value=2005-11-19 name=date></TD>
<TD width=60>
<DIV onselectstart="return false;" onmouseover="this.childNodes[0].style.borderBottom='0px';this.childNodes[1].style.display='';this.style.zIndex=100;var slts=document.getElementsByTagName('SELECT');for(var i=0;i<slts.length;i++)slts[i].style.visibility='hidden';" style="OVERFLOW: visible; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px" onmouseout="this.childNodes[0].style.borderBottom='1px solid #000080';this.childNodes[1].style.display='none';this.style.zIndex=99;var slts=document.getElementsByTagName('SELECT');for(var i=0;i<slts.length;i++)slts[i].style.visibility='';">
<DIV style="BORDER-RIGHT: #000080 1px solid; BORDER-TOP: #000080 1px solid; Z-INDEX: 99; FONT: 12px/12px 宋体; BORDER-LEFT: #000080 1px solid; WIDTH: 60px; CURSOR: default; COLOR: #000080; PADDING-TOP: 3px; BORDER-BOTTOM: #000080 1px solid; POSITION: absolute; TOP: -9px; HEIGHT: 18px; BACKGROUND-COLOR: #eeeeff; TEXT-ALIGN: center"><NOBR>选择日期</NOBR></DIV>
<DIV style="BORDER-RIGHT: #000080 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #000080 1px solid; DISPLAY: none; PADDING-LEFT: 3px; BACKGROUND: #eeeeff; PADDING-BOTTOM: 3px; BORDER-LEFT: #000080 1px solid; WIDTH: 1px; PADDING-TOP: 3px; BORDER-BOTTOM: #000080 1px solid; POSITION: absolute; TOP: 8px; HEIGHT: 1px">
<TABLE onmouseover="if(event.srcElement.tagName=='TD'&amp;&amp;event.srcElement.isDay){event.srcElement.style.backgroundColor='#000080';event.srcElement.style.color='#EEEEFF';event.srcElement.style.cursor='hand';var ym=event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;event.srcElement.title=ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}" onclick="if(event.srcElement.tagName=='TD'&amp;&amp;event.srcElement.isDay){var inp=this.parentNode.parentNode.parentNode.previousSibling.childNodes[0];inp.value=this.rows[0].cells[2].childNodes[0].innerText+'-'+this.rows[0].cells[2].childNodes[2].innerText+'-'+event.srcElement.innerText;this.parentNode.style.display='none';this.parentNode.parentNode.style.zIndex=99;this.parentNode.previousSibling.style.borderBottom='1px solid #000080';var slts=document.getElementsByTagName('SELECT');for(var i=0;i<slts.length;i++)slts[i].style.visibility='';}" onmouseout="if(event.srcElement.tagName=='TD'&amp;&amp;event.srcElement.isDay){event.srcElement.style.backgroundColor='#EEEEFF';event.srcElement.style.color='#000080';event.srcElement.style.cursor='default';var ym=event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;event.srcElement.title=ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}" cellSpacing=1 cellPadding=1 width=175>
<TBODY>
<TR align=middle height=20>
<TD title=上一年 style="FONT: bold 7px/16px Verdana,宋体; CURSOR: hand; COLOR: #000080" onclick="var y=this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)-1;var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);var month=parseInt(this.parentNode.cells[2].childNodes[2].innerText);var firstDay=new Date(year,month-1,1);firstDay=firstDay.getDay();var lastDay=new Date(year,month,0);lastDay=lastDay.getDate();var tab=this.parentNode.parentNode, day=1;for(var row=2;row<8;row++)  for(var col=0;col<7;col++){    if(row==2&amp;&amp;col<firstDay){      tab.rows[row].cells[col].innerHTML='&nbsp;';      tab.rows[row].cells[col].isDay=0;}    else if(day<=lastDay){      tab.rows[row].cells[col].innerHTML=day;      tab.rows[row].cells[col].isDay=1;day++;}    else{      tab.rows[row].cells[col].innerHTML='';      tab.rows[row].cells[col].isDay=0;}  }">&lt;&lt;</TD>
<TD title=上个月 style="FONT: bold 7px/16px Verdana,宋体; CURSOR: hand; COLOR: #000080" onclick="var y=this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];m.innerText=parseInt(m.innerText)-1;if(m.innerText=='0'){m.innerText=12;y.innerText=parseInt(y.innerText)-1;}var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);var month=parseInt(this.parentNode.cells[2].childNodes[2].innerText);var firstDay=new Date(year,month-1,1);firstDay=firstDay.getDay();var lastDay=new Date(year,month,0);lastDay=lastDay.getDate();var tab=this.parentNode.parentNode, day=1;for(var row=2;row<8;row++)  for(var col=0;col<7;col++){    if(row==2&amp;&amp;col<firstDay){      tab.rows[row].cells[col].innerHTML='&nbsp;';      tab.rows[row].cells[col].isDay=0;}    else if(day<=lastDay){      tab.rows[row].cells[col].innerHTML=day;      tab.rows[row].cells[col].isDay=1;day++;}    else{      tab.rows[row].cells[col].innerHTML='';      tab.rows[row].cells[col].isDay=0;}  }" align=left>&lt;</TD>
<TD style="FONT: bold 12px/16px 宋体; CURSOR: default; COLOR: #000080" vAlign=bottom colSpan=3><SPAN>2005</SPAN><SPAN>年</SPAN><SPAN>11</SPAN><SPAN>月</SPAN> </TD>
<TD title=下个月 style="FONT: bold 7px/16px Verdana,宋体; CURSOR: hand; COLOR: #000080" onclick="var y=this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];m.innerText=parseInt(m.innerText)+1;if(m.innerText=='13'){m.innerText=1;y.innerText=parseInt(y.innerText)+1;}var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);var month=parseInt(this.parentNode.cells[2].childNodes[2].innerText);var firstDay=new Date(year,month-1,1);firstDay=firstDay.getDay();var lastDay=new Date(year,month,0);lastDay=lastDay.getDate();var tab=this.parentNode.parentNode, day=1;for(var row=2;row<8;row++)  for(var col=0;col<7;col++){    if(row==2&amp;&amp;col<firstDay){      tab.rows[row].cells[col].innerHTML='&nbsp;';      tab.rows[row].cells[col].isDay=0;}    else if(day<=lastDay){      tab.rows[row].cells[col].innerHTML=day;      tab.rows[row].cells[col].isDay=1;day++;}    else{      tab.rows[row].cells[col].innerHTML='';      tab.rows[row].cells[col].isDay=0;}  }" align=right>&gt;</TD>
<TD title=下一年 style="FONT: bold 7px/16px Verdana,宋体; CURSOR: hand; COLOR: #000080" onclick="var y=this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)+1;var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);var month=parseInt(this.parentNode.cells[2].childNodes[2].innerText);var firstDay=new Date(year,month-1,1);firstDay=firstDay.getDay();var lastDay=new Date(year,month,0);lastDay=lastDay.getDate();var tab=this.parentNode.parentNode, day=1;for(var row=2;row<8;row++)  for(var col=0;col<7;col++){    if(row==2&amp;&amp;col<firstDay){      tab.rows[row].cells[col].innerHTML='&nbsp;';      tab.rows[row].cells[col].isDay=0;}    else if(day<=lastDay){      tab.rows[row].cells[col].innerHTML=day;      tab.rows[row].cells[col].isDay=1;day++;}    else{      tab.rows[row].cells[col].innerHTML='';      tab.rows[row].cells[col].isDay=0;}  }">&gt;&gt;</TD></TR>
<TR align=middle bgColor=#eeeeff height=20>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">日</TD>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">一</TD>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">二</TD>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">三</TD>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">四</TD>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">五</TD>
<TD style="FONT: 12px/15px 宋体; CURSOR: default; COLOR: #000080" width="14%">六</TD></TR>
<TR align=middle>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080">&nbsp;</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080">&nbsp;</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">1</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">2</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">3</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">4</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">5</TD></TR>
<TR align=middle>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">6</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">7</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">8</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">9</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">10</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">11</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">12</TD></TR>
<TR align=middle>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">13</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">14</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">15</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">16</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">17</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">18</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">19</TD></TR>
<TR align=middle>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">20</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">21</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">22</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">23</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">24</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">25</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">26</TD></TR>
<TR align=middle>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">27</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">28</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">29</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080" isDay="1">30</TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD></TR>
<TR align=middle>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD>
<TD style="FONT: 9px/12px Verdana,Arial,宋体; CURSOR: default; COLOR: #000080"></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></BODY></html>