本文介绍了一款基于JavaScript的精致日历式日期输入控件，包括其样式、功能及使用方法，支持直接输入和按钮触发两种方式选择日期。
日历式日期选择控件
<HTML> <HEAD> <TITLE>最精致的日历式日期输入控件 (Smart Ver 1.00)</TITLE> </HEAD> <style> body { font-size:12px; font-family:"Tahoma"; } td { font-size:12px; font-family:"Tahoma"; } .inputdate { border:1px solid #7287c6; text-align: center; font-size: 12px; font-style: normal; height: 16px; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- /******************************************************************** more javascript from
http://www.smallrain.net 时间：2004-01-01 作者：Smart 功能：日历式日期选择控件 参数： 说明： 1.输入框直接调用用以下代码 <Script>DateBox("InputName","DateValue")<//Script> 其中:InputName 为输入日期的文本框.注:不能为空. DateValue 为输入日期的文本框默认日期值.格式为:YYYY-MM-DD.如2004-01-01 此值可以不填或为空.则默认值为当天日期.(客户端) 2.其它"按钮"调用用以下代码 CallDate("InputName") 其中:InputName 为输入日期的文本框.注:不能为空. 修改区 时间： 修改人： 原因： ********************************************************************/ /*基本参数*/ var Frw=106; //日历宽度 var Frh=137; //日历高度 var Frs=4; //影子大小 var Hid=true;//日历是否打开 /*创建框架*/ document.writeln('<Div id=Calendar Author=smart scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+Frw+'; height: '+Frh+'; z-index: 0; filter :/'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+Frs+')/' ;display: none"></Div>'); /*取得今日日期*/ function GetTodayDate() { today= new Date(); y= today.getYear(); m= (today.getMonth() + 1); if (m<10) { m='0'+m; } d= today.getDate(); if (d<10) { d='0'+d; } return y+'-'+m+'-'+d } /*输入今天日期*/ function SetTodayDate(InputBox) { HiddenCalendar(); InputBox.value=GetTodayDate(); } /*取某年某月第一天的星期值(月份-1)*/ function GetFirstWeek(The_Year,The_Month) { return (new Date(The_Year,The_Month-1,1)).getDay() } /*取某年某月中总天数*/ function GetThisDays(The_Year,The_Month) { return (new Date(The_Year,The_Month,0)).getDate() } /*取某年某月上个月中总天数*/ function GetLastDays(The_Year,The_Month) { return (new Date(The_Year,The_Month-1,0)).getDate() } /*判断是否是闰年*/ function RunNian(The_Year) { if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0))) return true; else return false; } /* 判断日期(YYYY-MM-DD)的日期是否正确 */ function DateIsTrue(asDate){ var lsDate = asDate + ""; var loDate = lsDate.split("-"); if (loDate.length!=3) return false; var liYear = parseFloat(loDate[0]); var liMonth = parseFloat(loDate[1]); var liDay = parseFloat(loDate[2]); if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2)) return false; if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay)) return false; if ((liYear<1800)||(liYear>2500)) return false; if ((liMonth>12)||(liMonth<=0)) return false; if (GetThisDays(liYear,liMonth)<liDay) return false; return !isNaN(Date.UTC(liYear,liMonth,liDay)); } /*取某年某月的周值*/ function GetCountWeeks(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 InputValue(InputBox,Year,Month,Day) { if (Month<10) { Month='0'+Month } if (Day<10) { Day='0'+Day } InputBox.value=Year+"-"+Month+"-"+Day } //上一月 function ForwardMonth(InputBox,Year,Month,Day) { Month=Month-1; if (Month<1) { Month=12; Year=Year-1; if (Year<1800) Year=2500; } Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day) Hid=false; ShowCalendar(InputBox,Year,Month,Day) } //下一月 function NextMonth(InputBox,Year,Month,Day) { Month=Month+1; if (Month>12) { Month=1; Year=Year+1; if (Year>2500) Year=1800; } Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day) Hid=false; ShowCalendar(InputBox,Year,Month,Day) } //上一年 function ForwardYear(InputBox,Year,Month,Day) { Year=Year-1; if (Year<1800) Year=2500; Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day) Hid=false; ShowCalendar(InputBox,Year,Month,Day) } //下一年 function NextYear(InputBox,Year,Month,Day) { Year=Year+1; if (Year>2500) Year=1800; Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day) Hid=false; ShowCalendar(InputBox,Year,Month,Day) } /*其它事件显示日历*/ function OpenDate(where) { GetCalendar(where) } /*根据输入框中的日期显示日历*/ function GetCalendar(where) { Hid=false; var Box_Name=where.name; var Box_value=where.value; if (DateIsTrue(Box_value)) { loDate = Box_value.split("-"); Y= parseFloat(loDate[0]); M= parseFloat(loDate[1]); D= parseFloat(loDate[2]); ShowCalendar(where,Y,M,D); } else { today= new Date(); y= today.getYear(); m= (today.getMonth() + 1); d=today.getDate(); ShowCalendar(where,y,m,d); } } /*隐藏日历*/ function HiddenCalendar() { document.all.Calendar.style.display="none"; } function CloseCalendar() { if (Hid) document.all.Calendar.style.display="none"; Hid=true; } /*显示日历*/ function ShowCalendar(InputBox,The_Year,The_Month,The_Day) { var Now_Year=(The_Year==null?2004:The_Year); var Now_Month=(The_Month==null?1:The_Month); var Now_Day=(The_Day==null?1:The_Day); var Box_Name='window.parent.document.all.'+InputBox.name; var fw=GetFirstWeek(Now_Year,Now_Month); var ld=GetLastDays(Now_Year,Now_Month); var td=GetThisDays(Now_Year,Now_Month); var isnd=false;//是否是下个月的日期 var d=1,w=1; var FrameContent; var Frl,Frt,Winw,Winh; /*显示的位置*/ Winw=document.body.offsetWidth; Winh=document.body.offsetHeight; Frl=InputBox.getBoundingClientRect().left-2; Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight; if (((Frl+Frw+Frs)>Winw)&&(Frw+Frs<Winw)) Frl=Winw-Frw-Frs; if ((Frt+Frh+Frs>Winh)&&(Frh+Frs<Winh)) Frt=Winh-Frh-Frs; document.all.Calendar.style.display=""; document.all.Calendar.style.left=Frl; document.all.Calendar.style.top=Frt; //显示日历内容 FrameContent="/n<table onselectstart=/"return false;/" border='0' cellpadding='0' cellspacing='0' bgcolor='#395592' width='100%' height='15' style=/"color:white;font-weight:bolder;border:0px solid/">"+"/n<tr>/n"; FrameContent+="<td width=8>"; FrameContent+="<img src='inc/-.gif' width='8' height='11' border='0' alt='上一年' style='cursor:hand' onclick=/"parent.ForwardYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")/">"; FrameContent+="</td>/n"; FrameContent+="<td vAlign=middle align='center'>"; FrameContent+=Now_Year; FrameContent+="年"; FrameContent+="</td>/n"; FrameContent+="<td width=8>"; FrameContent+="<img src='inc/+.gif' width='8' height='11' border='0' alt='下一年' style='cursor:hand' onclick=/"parent.NextYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")/">"; FrameContent+="</td>/n"; FrameContent+="<td width=8>"; FrameContent+="<img src='inc/-.gif' width='8' height='11' border='0' alt='上一月' style='cursor:hand' onclick=/"parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")/">"; FrameContent+="</td>/n"; FrameContent+="<td vAlign=middle align='center' width='16'>"; FrameContent+=Now_Month; FrameContent+="</td>/n"; FrameContent+="<td vAlign=middle align='center' width='13'>"; FrameContent+="月"; FrameContent+="</td>/n"; FrameContent+="<td width=8>"; FrameContent+="<img src='inc/+.gif' width='8' height='11' border='0' alt='下一月' style='cursor:hand' onclick=/"parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")/">"; FrameContent+="</td>"+"/n"; FrameContent+="</tr>"+"/n"; FrameContent+="</table>"+"/n"; FrameContent+="<table onselectstart=/"return false;/" border='0' cellpadding='0' cellspacing='1' width='100%' bgcolor='#CCCCCC'>"+"/n"; FrameContent+="<tr bgcolor='#F5F5F5'>"+"/n"; FrameContent+="<td><center>一</center></td>"+"/n"; FrameContent+="<td><center>二</center></td>"+"/n"; FrameContent+="<td><center>三</center></td>"+"/n"; FrameContent+="<td><center>四</center></td>"+"/n"; FrameContent+="<td><center>五</center></td>"+"/n"; FrameContent+="<td><center>六</center></td>"+"/n"; FrameContent+="<td><center><font color='#FF0000'>日</font></center></td>"+"/n"; FrameContent+="</tr>"+"/n"; //如果本月第一天是星期一或星期天.应加上七.保证可以看到上个月的日期 if (fw<2) tf=fw+7; else tf=fw; FrameContent+="<tr bgcolor='#FFFFFF'>"+"/n"; //第一行上月日期 for (l=(ld-tf+2);l<=ld;l++) { FrameContent+="<td onclick=/"parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+l+")/" style='cursor:hand'><center><font color='#BBBBBB'>"+l+"</font></center></td>"+"/n"; w++; } //第一行本月日期 for (f=tf;f<=7;f++) { //星期天但非输入日期 if (((w%7)==0)&&(d!=Now_Day)) FrameContent+="<td onMouseOver=/"this.style.background=/'#E1E1E1/'/" onMouseOut=/"this.style.background=/'#FFFFFF/'/" onClick=/"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()/" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+"/n"; //日期为输入日期 else if (d==Now_Day) FrameContent+="<td style=/"background:#420042;cursor:hand/" onClick=/"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()/"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+"/n"; //其它 else FrameContent+="<td onMouseOver=/"this.style.background=/'#E1E1E1/'/" onMouseOut=/"this.style.background=/'#FFFFFF/'/" onClick=/"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()/" style='cursor:hand'><center>"+d+"</center></td>"+"/n"; d++; w++; } FrameContent+="</tr>"+"/n"; w=1; for (i=2;i<7;i++) { FrameContent+="<tr bgcolor='#FFFFFF'>"+"/n"; for (j=1;j<8;j++) { if (isnd)//下个月的日期 FrameContent+="<td style='cursor:hand' onclick=/"parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+")/"><center><font color='#BBBBBB'>"+d+"</font></center></td>"+"/n"; else//本月的日期 { //星期天但非输入日期 if (((w%7)==0)&&(d!=Now_Day)) FrameContent+="<td onMouseOver=/"this.style.background=/'#E1E1E1/'/" onMouseOut=/"this.style.background=/'#FFFFFF/'/" onClick=/"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()/" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+"/n"; //日期为输入日期 else if (d==Now_Day) FrameContent+="<td style=/"background:#420042;cursor:hand/" onClick=/"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()/"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+"/n"; //其它 else FrameContent+="<td onMouseOver=/"this.style.background=/'#E1E1E1/'/" onMouseOut=/"this.style.background=/'#FFFFFF/'/" onClick=/"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()/" style='cursor:hand'><center>"+d+"</center></td>"+"/n"; } //判断是否为本月的日期 if (d==td) { isnd=true; d=0; } w++; d++; } FrameContent+="</tr>"+"/n"; } FrameContent+="</table>"+"/n"; FrameContent+="<table onselectstart=/"return false;/" cellpadding='0' cellspacing='0' bgcolor='#F5F5F5' width='100%' height='15'>"+"/n<tr>/n"; FrameContent+="<td title=/"今日:"+GetTodayDate()+"/" style=/"cursor:hand/" onclick=/"parent.SetTodayDate(window.parent.document.all."+InputBox.name+")/">"; FrameContent+="<font color=red>今日:</font>"+GetTodayDate(); FrameContent+="</td>/n"; FrameContent+="<td>"; FrameContent+="<img src='inc/close.gif' width='13' height='13' border='0' alt='关闭' style='cursor:hand' onclick=/"parent.HiddenCalendar()/">"; FrameContent+="</td>/n"; FrameContent+="</tr>/n"; document.all.Calendar.innerHTML=FrameContent; document.all.Calendar.style.display=""; } /*显示输入框*/ function DateBox(sBoxName, sDfltValue) { if (sBoxName==null) sBoxName='Date_Box' if ((sDfltValue==null)||!(DateIsTrue(sDfltValue))) sDfltValue= GetTodayDate() else { DateStr = sDfltValue.split("-"); Y= parseFloat(DateStr[0]); M= (parseFloat(DateStr[1])<10)?('0'+parseFloat(DateStr[1])):parseFloat(DateStr[1]); D= (parseFloat(DateStr[2])<10)?('0'+parseFloat(DateStr[2])):parseFloat(DateStr[2]); sDfltValue=Y+'-'+M+'-'+D } document.write("<input size='10' readonly class='inputdate' name='"+sBoxName+"' value='"+sDfltValue+"' onclick='GetCalendar(window.document.all."+sBoxName+")' >"); } document.onclick = CloseCalendar; //--> </SCRIPT> <BODY topmargin="0" leftmargin="0"> 点击输入框调用日历.<Script>DateBox("Test1")</Script> <Script>DateBox("Test2","2004-01-01")</Script> 其它事件调用日历. <input type="text" class="inputdate" size="10" name="Test3" readonly> <input type="button" class="inputdate" onclick="OpenDate(Test3)" value="显示日历"> </BODY> </HTML>
扫一扫
3284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
