|
|
域名空间 下载中心 社区论坛 信息公告 my小屋 | |
 |
联系我们 设为首页 加入收藏 |
 |
|
 |
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 网络赚钱 | 网站地图 | 广告服务 | 服务 |
 |
 |
 |
 当前位置：首页>>网页设计>>网页特效>>正文 |
新版上线！[旧版] |  |
|||
注:打开慢时请稍等
|
<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="http://www.iyit.net/files/beyondpic/2006-5/5/065509585541765.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="http://www.iyit.net/files/beyondpic/2006-5/5/065509585570868.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="http://www.iyit.net/files/beyondpic/2006-5/5/065509585541765.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="http://www.iyit.net/files/beyondpic/2006-5/5/065509585570868.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="http://www.iyit.net/files/beyondpic/2006-5/5/065509585670624.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> 编辑：黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇：正则表达式regular expression详述 下一篇：md5算法在js中的实现 转载请注明来源：www.iyit.net 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
 |
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |  |
| |||||||
易特网络技术