最近更新加入收藏网站地图

Vista | 软件评测 | 系统备份 | 优化 | 进程 | 聊天 | 病毒 | Linux | 黑客 | 防火墙 | 数据库 | Web开发 | Java | Word | 游戏 | 32位开发 | 移动开发 | QQ专区

当前位置：首页 > 网页制作 > JavaScript技术内容正文：一个表单日期输入的JS脚本非常实用

一个表单日期输入的JS脚本非常实用

发布时间：2006-06-18 19:52:01　来源：友佳学院网友评论 0 条

欢迎访问友好佳学院

运行代码：

<script language=javascript>var DS_x,DS_y;function dateSelector() //构造dateSelector对象，用来实现一个日历形式的日期输入框。{var myDate=new Date();this.year=myDate.getFullYear(); //定义year属性，年份，默认值为当前系统年份。this.month=myDate.getMonth()+1; //定义month属性，月份，默认值为当前系统月份。this.date=myDate.getDate(); //定义date属性，日，默认值为当前系统的日。this.inputName=''; //定义inputName属性，即输入框的name，默认值为空。注意：在同一页中出现多个日期输入框，不能有重复的name！this.display=display; //定义display方法，用来显示日期输入框。}function display() //定义dateSelector的display方法，它将实现一个日历形式的日期选择框。{var week=new Array('日','一','二','三','四','五','六');document.write("<style type=text/css>");document.write(" .ds_font td,span { font: normal 12px 宋体; color: #000000; }");document.write(" .ds_border { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");document.write(" .ds_border2 { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");document.write("</style>");document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");document.write("<button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style.display='block' onfocus=this.blur()>选择日期</button>");document.write("<div style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible' onselectstart='return false;'>");document.write(" <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font>");document.write(" <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");document.write(" <tr align=center>");document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'><<</td>");document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subMonth(this) title='减小月份'><</td>");document.write(" <td width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>></td>");document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>>></td>");document.write(" </tr>");document.write(" </table>");document.write(" <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");document.write(" <tr align=center>");for(i=0;i<7;i++)document.write(" <td>"+week[i]+"</td>");document.write(" </tr>");document.write(" </table>");document.write(" <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE>");for(i=0;i<6;i++){document.write(" <tr align=center>");for(j=0;j<7;j++)document.write(" <td width=10% height=16 onmouseover=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getvalue(this,document.all('DS_"+this.inputName+"'))></td>");document.write(" </tr>");}document.write(" </table>");document.write(" <span style=cursor:hand onclick=this.parentNode.parentNode.style.display='none'>【关闭】</span>");document.write(" </div>");document.write("</div>");dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)}function subYear(obj) //减小年份{var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function addYear(obj) //增加年份{var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function subMonth(obj) //减小月份{var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;var month=eval(myObj[2].innerHTML)-1;if(month==0){month=12;subYear(obj);}myObj[2].innerHTML=month;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function addMonth(obj) //增加月份{var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;var month=eval(myObj[2].innerHTML)+1;if(month==13){month=1;addYear(obj);}myObj[2].innerHTML=month;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function dateShow(obj,year,month) //显示各月份的日{var myDate=new Date(year,month-1,1);var today=new Date();var day=myDate.getDay();var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');var length;switch(month){case 1:case 3:case 5:case 7:case 8:case 10:case 12:length=31;break;case 4:case 6:case 9:case 11:length=30;break;case 2:if((year%4==0)&&(year%100!=0)||(year%400==0))length=29;elselength=28;}for(i=0;i<obj.cells.length;i++){obj.cells[i].innerHTML='';obj.cells[i].style.color='';obj.cells[i].className='';}for(i=0;i<length;i++){obj.cells[i+day].innerHTML=(i+1);if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())obj.cells[i+day].style.color='red';if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))obj.cells[i+day].className='ds_border2';}}function getvalue(obj,inputObj) //把选择的日期传给输入框{var myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;if(obj.innerHTML)inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;inputObj.nextSibling.nextSibling.style.display='none';for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)obj.parentNode.parentNode.parentNode.cells[i].className='';obj.className='ds_border2'}function dsMove(obj) //实现层的拖移{if(event.button==1){var X=obj.clientLeft;var Y=obj.clientTop;obj.style.pixelLeft=X+(event.x-DS_x);obj.style.pixelTop=Y+(event.y-DS_y);}}</script>从<script language=javascript>var myDate=new dateSelector();myDate.year--;myDate.inputName='start_date'; //注意这里设置输入框的name，同一页中日期输入框，不能出现重复的name。myDate.display();</script>

相关文章

【评论】【收藏本文】【打印】【关闭】

上一篇文章：载入Loadbar 另一种很酷的载入效果
下一篇文章：实现Title动态效果JS脚本

已有 0 位对此新闻感兴趣的网友发表了看法

图文阅读推荐

推荐阅讯: Javascript实现广告页面的定时关闭; 应用实例：用Javascript实现定时任务; 限量版广告 1个IP一天只弹一次的AD代码; 网页特效：一段实用的图片滚动显示代码; 特效：一个可以用来做招牌字的特效; 实例：尽可能写友好的Javascript代码; 分析一下网页子窗口和网页父窗口的交互; 在Javascript中，什么是闭包(Closure); 特效：亥客帝国的经典效果; JavaScript高级程序设计：2.2 变量

阅读排行: 1.网页特效：一段实用的图片滚动显示代码; 2.网页特效实例：用js获取单选按钮的数据; 3.Javascript特效：随机显示图片的源代码; 4.Javascript技术技巧大全; 5.IE和FireFox下javascript读写XML实现广告轮; 6.用 JavaScript 来操作字符串的函数; 7.添加到收藏夹的Javascript脚本-适合IE和Fir; 8.怎样判断浏览器是否支持javascript?; 9.JavaScript实现网页图片等比例缩放; 10.网页特效：随机显示广告的JS源代码

专题教程: Windows Server-Windows Server文档-Windows Server新闻-Windows Ser PostgreSQL-PostgreSQL文档-PostgreSQL新闻-PostgreSQL专家; WebLogic-WebLogic文档-WebLogic新闻-WebLogic专家 FreeBSD-FreeBSD文档-FreeBSD新闻-FreeBSD专家; Linux-内核 GUI KDE Gnome DNS FTP 安全安装-Linux专区 Windows-AD IIS ServerCore 虚拟化安全 HPC-Windows专区; 大话G游专题：手机病毒揭密; ARP攻击防范与解决方案路由故障处理手册

深度XP 雨林木风XP WinXP下载世界之窗浏览器风行网络电影 ZCOM电子杂志 UUSee网络电视金山毒霸杀毒酷我音乐盒

深度系统雨林木风 Ghost ghost系统盘 XP下载小游戏 flash 股票购物彩票交友非主流汽车健康电影金山词霸