一、放到页面中的脚本
<div style="position:absolute; z-index:0;text-align:left;width:104px; "> <div style="position:absolute;clear:left;z-index: 2; top:0; left:0px; "> <input id="Text1" type="text" style="width:100px;" maxlength="10"/> <div style="position:absolute;z-index: 1; top:0; right:0px; "><input id="Button2" type="button" value="∨" style=" width: 22px; height: 23px; " οnclick="return buc('showdate','Text1')" /></div></div> <br /> <div id="showdate"style="position:relative ;z-index:-1; display:none;"> </div> </div><br />
二、js文件中的内容 （在页面中引用）
申明：下面的代码大部分在网上引用，进行了部分的修改。
// JScript 文件
var The_Year,The_Day,The_Month; var today; var Firstday; today = new Date();
function RunNian(The_Year){ if ((The_Year@0==0) || ((The_Year%4==0) && (The_Year0!=0))) return true; else return false;}
function GetWeekday(The_Year,The_Month){ var Allday; var t=0; Allday = new Date(); Allday.setFullYear(The_Year,The_Month); Allday.setDate=1; //document.getElementById("Text1").value=Allday.getDay(); switch (getDayInMonth(The_Year,The_Month)){ case 31 : t=3;break; case 30 : t=2;break; case 28 : t=0;break; case 29 : t=1;break;
} return (7+Allday.getDay()-t)%7;
}function getDayInMonth(The_Year,The_Month){ switch (The_Month) { case 1 : return 31; break; case 2 : if (RunNian(The_Year)) return 29; else return 28; break; case 3 : return 31; break; case 4 : return 30; break; case 5 : return 31; break; case 6 : return 30; break; case 7 : return 31; break; case 8 : return 31; break; case 9 : return 30; break; case 10 : return 31; break; case 11 : return 30; break; case 12 : return 31; break; } }function chooseday(The_Year,The_Month,The_Day,showPanelName,resultName){ var Firstday; var completely_date; if (The_Day!=0){ completely_date = The_Year + "-" + The_Month + "-" + The_Day; document.getElementById(resultName).value = completely_date;
document.getElementById(showPanelName).style.display="none";
} else completely_date = "No Choose"; //showdate 只是一个为了显示而采用的东西， //如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期 //也可以通过The_Year,The_Month,The_Day分别引用年，月，日 //当进行月份和年份的选择时，认为没有选择完整的日期 Firstday = GetWeekday(The_Year,The_Month); ShowCalender(The_Year,The_Month,The_Day,Firstday,showPanelName,resultName); }
function nextmonth(The_Year,The_Month,showPanelName,resultName){ if (The_Month==12) chooseday(The_Year+1,1,0,showPanelName,resultName); else chooseday(The_Year,The_Month+1,0,showPanelName,resultName);}
function prevmonth(The_Year,The_Month,showPanelName,resultName){ if (The_Month==1) chooseday(The_Year-1,12,0,showPanelName,resultName); else chooseday(The_Year,The_Month-1,0,showPanelName,resultName);}
function prevyear(The_Year,The_Month,showPanelName,resultName){ chooseday(The_Year-1,The_Month,0,showPanelName,resultName);}
function nextyear(The_Year,The_Month,showPanelName,resultName){ chooseday(The_Year+1,The_Month,0,showPanelName,resultName);}
function ShowCalender(The_Year,The_Month,The_Day,Firstday,showPanelName,resultName){
var showstr; var Month_Day; var ShowMonth; var today; today = new Date(); switch (The_Month) { case 1 : ShowMonth = "1月"; Month_Day = 31; break; case 2 : ShowMonth = "2月"; if (RunNian(The_Year)) Month_Day = 29; else Month_Day = 28; break; case 3 : ShowMonth = "3月"; Month_Day = 31; break; case 4 : ShowMonth = "4月"; Month_Day = 30; break; case 5 : ShowMonth = "5月"; Month_Day = 31; break; case 6 : ShowMonth = "6月"; Month_Day = 30; break; case 7 : ShowMonth = "7月"; Month_Day = 31; break; case 8 : ShowMonth = "8月"; Month_Day = 31; break; case 9 : ShowMonth = "9月"; Month_Day = 30; break; case 10 : ShowMonth = "10月"; Month_Day = 31; break; case 11 : ShowMonth = "11月"; Month_Day = 30; break; case 12 : ShowMonth = "12月"; Month_Day = 31; break; } showstr = ""; showstr = "<Table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=95% align=center valign=top>"; showstr += "<tr><td width=0 style='cursor:hand' οnclick=prevyear("+The_Year+"," + The_Month +",'"+showPanelName+"','"+resultName+"')><<</td><td width=0> " + The_Year + " </td><td width=0 οnclick=nextyear("+The_Year+","+The_Month+",'"+showPanelName+"','"+resultName+"') style='cursor:hand'>>></td><td width=0 style='cursor:hand' οnclick=prevmonth("+The_Year+","+The_Month+",'"+showPanelName+"','"+resultName+"')><<</td><td width=100 align=center>" + ShowMonth + "</td><td width=0 οnclick=nextmonth("+The_Year+","+The_Month+",'"+showPanelName+"','"+resultName+"') style='cursor:hand'>>></td></tr>"; showstr += "<tr><td align=center width=100% colspan=6>"; showstr += "<table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=100%>"; showstr += "<Tr align=center bgcolor=#999999> "; showstr += "<td><strong><font color=#0000CC>日</font></strong></td>"; showstr += "<td><strong><font color=#0000CC>一</font></strong></td>"; showstr += "<td><strong><font color=#0000CC>二</font></strong></td>"; showstr += "<td><strong><font color=#0000CC>三</font></strong></td>"; showstr += "<td><strong><font color=#0000CC>四</font></strong></td>"; showstr += "<td><strong><font color=#0000CC>五</font></strong></td>"; showstr += "<td><strong><font color=#0000CC>六</font></strong></td>"; showstr += "</Tr><tr>"; for (i=1; i<=Firstday; i++) showstr += "<td align=center bgcolor=#CCCCCC> </Td>"; for (i=1; i<=Month_Day; i++) { if ((The_Year==today.getYear()) && (The_Month==today.getMonth()+1) && (i==today.getDate())) bgColor = "#FFCCCC"; else bgColor = "#CCCCCC"; if (The_Day==i) bgColor = "#FFFFCC"; showstr += "<td align=center bgcolor=" + bgColor + " style='cursor:hand' οnclick=chooseday(" + The_Year + "," + The_Month
+ "," + i + ",'"+showPanelName+"','"+resultName+"')>" + i + "</td>"; Firstday = (Firstday + 1)%7; if ((Firstday==0) && (i!=Month_Day)) showstr += "</tr><tr>"; } if (Firstday!=0) { for (i=Firstday; i<7; i++) showstr += "<td align=center bgcolor=#CCCCCC> </td>"; showstr += "</tr>"; } showstr += "</tr></table></td></tr></table>"; document.getElementById(showPanelName).innerHTML = showstr;
}
function scC(tValue,showPanelName,resultName){ if (tValue==""){ The_Year = today.getYear(); The_Month = today.getMonth() + 1; The_Day = today.getDate(); Firstday = GetWeekday(The_Year,The_Month); ShowCalender(The_Year,The_Month,The_Day,Firstday,showPanelName,resultName); }else{ if (document.getElementById(showPanelName).innerHTML==""){ The_Year = today.getYear(); The_Month = today.getMonth() + 1; The_Day = today.getDate(); Firstday = GetWeekday(The_Year,The_Month); ShowCalender(The_Year,The_Month,The_Day,Firstday,showPanelName,resultName); }else { document.getElementById("showdate").style.display=""; } }}
function buc(showPanelName,resultName){ if (document.getElementById(showPanelName).style.display=="") { document.getElementById(showPanelName).style.display="none"; }else { scC(document.getElementById(resultName).value,showPanelName,resultName); document.getElementById(showPanelName).style.display=""; } }
可以再加个日期型数据的验证。
好啦，到这里就结束了。
