--用JavaScript实现的日期选择框

　W3CHINA Blog首页 管理页面写新日志退出

冷冰雨发表于 2005/3/16 18:09:17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Canlender--JavaScript</title><style>td { font-family: Arial, Helvetica, sans-serif; font-size: 12px;} </style> </head><body><table border="0" cellpadding="0" cellspacing="0" width="180"><tr><td id=cc></td></tr></table></body><script language="JavaScript">function RunNian(The_Year){ if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0))) return true; else return false;}function GetWeekday(The_Year,The_Month){ var Allday; Allday = 0; if (The_Year>2000) { for (i=2000 ;i<The_Year; i++) if (RunNian(i)) Allday += 366; else Allday += 365; for (i=2; i<=The_Month; i++) { switch (i) { case 2 : if (RunNian(The_Year)) Allday += 29; else Allday += 28; break; case 3 : Allday += 31; break; case 4 : Allday += 30; break; case 5 : Allday += 31; break; case 6 : Allday += 30; break; case 7 : Allday += 31; break; case 8 : Allday += 31; break; case 9 : Allday += 30; break; case 10 : Allday += 31; break; case 11 : Allday += 30; break; case 12 : Allday += 31; break; } } } return (Allday+6)%7; } function chooseday(The_Year,The_Month,The_Day){ var Firstday; var completely_date; if (The_Day!=0) completely_date = The_Year + "-" + The_Month + "-" + The_Day; else completely_date = "No Choose"; //showdate 只是一个为了显示而采用的东西， //如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期 //也可以通过The_Year,The_Month,The_Day分别引用年，月，日 //当进行月份和年份的选择时，认为没有选择完整的日期 showdate.innerText = completely_date; Firstday = GetWeekday(The_Year,The_Month); ShowCalender(The_Year,The_Month,The_Day,Firstday); } function nextmonth(The_Year,The_Month){ if (The_Month==12) chooseday(The_Year+1,1,0); else chooseday(The_Year,The_Month+1,0);} function prevmonth(The_Year,The_Month){ if (The_Month==1) chooseday(The_Year-1,12,0); else chooseday(The_Year,The_Month-1,0);} function prevyear(The_Year,The_Month){ chooseday(The_Year-1,The_Month,0);} function nextyear(The_Year,The_Month){ chooseday(The_Year+1,The_Month,0);} function ShowCalender(The_Year,The_Month,The_Day,Firstday){ var showstr; var Month_Day; var ShowMonth; var today; today = new Date(); switch (The_Month) { case 1 : ShowMonth = "January"; Month_Day = 31; break; case 2 : ShowMonth = "February"; if (RunNian(The_Year)) Month_Day = 29; else Month_Day = 28; break; case 3 : ShowMonth = "March"; Month_Day = 31; break; case 4 : ShowMonth = "April"; Month_Day = 30; break; case 5 : ShowMonth = "May"; Month_Day = 31; break; case 6 : ShowMonth = "June"; Month_Day = 30; break; case 7 : ShowMonth = "July"; Month_Day = 31; break; case 8 : ShowMonth = "August"; Month_Day = 31; break; case 9 : ShowMonth = "September"; Month_Day = 30; break; case 10 : ShowMonth = "October"; Month_Day = 31; break; case 11 : ShowMonth = "November"; Month_Day = 30; break; case 12 : ShowMonth = "December"; 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' onclick=prevyear("+The_Year+"," + The_Month + ")><<</td><td width=0> " + The_Year + " </td><td width=0 onclick=nextyear("+The_Year+","+The_Month+") style='cursor:hand'>>></td><td width=0 style='cursor:hand' onclick=prevmonth("+The_Year+","+The_Month+")><<</td><td width=100 align=center>" + ShowMonth + "</td><td width=0 onclick=nextmonth("+The_Year+","+The_Month+") 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' onclick=chooseday(" + The_Year + "," + The_Month + "," + i + ")>" + 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>"; cc.innerHTML = showstr; } </script> <script language="JavaScript"> var The_Year,The_Day,The_Month; var today; var Firstday; today = new Date(); 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);</script><div id=showdate></div></html>

阅读全文(4118) | 回复(1) | 编辑 | 精华

回复:用JavaScript实现的日期选择框

软件技术

dfd(游客)发表评论于2009/2/18 16:08:32

不错哟

个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除

» 1 »

发表评论：