易网时代-编程资源站

首页 / 脚本样式 / JavaScript / javascript 表单日期选择效果

<html> <head> <title>Agenda</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> BODY { FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; } A { FONT-SIZE: 9pt; TEXT-DECORATION: none; color: #000000 } A:hover { TEXT-DECORATION: none; color: #000000 } A:link { TEXT-DECORATION: none } A:visited { TEXT-DECORATION: none } BR { FONT-SIZE: 9pt; height: 15pt; } TD { FONT-SIZE: 9pt; LINE-HEIGHT: 11pt; } input { FONT-SIZE: 9pt; height: 15pt; } .SCROLLBAR { SCROLLBAR-FACE-COLOR: #718698; SCROLLBAR-HIGHLIGHT-COLOR: #899aa9; SCROLLBAR-SHADOW-COLOR: #506981; SCROLLBAR-3DLIGHT-COLOR: #5b7086; SCROLLBAR-ARROW-COLOR: #506981; SCROLLBAR-TRACK-COLOR: #5b7086; SCROLLBAR-DARKSHADOW-COLOR: #5b7086 } </style> <script language="JavaScript1.2"></script> </head> <body onClick="HideDate（）"> <p align=center> <br/> <p align=center> <input type=text id=selDate value="" style="width: 80px" readonly><input type=button value="q" style="FONT-SIZE: 7pt; FONT-FAMILY: Wingdings 3; width: 15pt" onClick="showCalendar（）"> <br/><table width="300" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td width="40" align="center" bgcolor="#000000" nowrap> <input type="button" value="|" style="FONT-FAMILY: Wingdings 3;width: 20px" onClick="DateChange（false）"></td> <td width="100%" align="center" bgcolor="#000000" style="color: white;FONT-WEIGHT: bold; CURSOR: default" nowrap><span id="ShowYear" onClick="YearChange（）"></span> 年 <span id="ShowMon" onClick="MonChange（）"></span> 月</td> <td width="40" align="center" bgcolor="#000000" nowrap><input type="button" value="}" style="FONT-FAMILY: Wingdings 3;width: 20px" onClick="DateChange（true）"> </td> </tr> <tr><td colspan="3" align="center"> <span id="Cal_Tab"></span> </td> </tr> <tr><td height=30 colspan="3" valign="middle" style="cursor: default" onClick="Cal_Tab.innerHTML=Calendar（years,months-1）;ShowYear.innerText=years;ShowMon.innerText=months"><image src=image/now.gif height=12><b>今天：<script>document.write（years + "-" + months + "-" + days）</script> </b> </td> </tr> </table><script language="JavaScript1.2"> ShowYear.innerText=years; ShowMon.innerText=months; Cal_Tab.innerHTML=Calendar（years,months-1）; ShowPlan（years,（months-1）,days）; </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<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（""）; document.write（""）; 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（""）; document.write（""）; 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; else length=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>  到 <script language=javascript> myDate.year++; myDate.inputName="end_date";//注意这里设置输入框的name，同一页中的日期输入框，不能出现重复的name。 myDate.display（）; </script><FONT color=red> My Js Collection！<input type="button" name="Button" value="源代码" onClick= "window.location = "view-source:" + window.location.href"><iframe name="alexa" src="http://data.alexa.com/data？cli=10&dat=snba&ver=7.0&cdt=alx_vw%3D20%26wid%3D29053%26act%3D00000000000%26ss%3D1024x768%26bw%3D1007%26t%3D1%26ttl%3D0%26rq%3D1&url=http://www.51windows.net/hw/asp/jsview.asp？id=240" width=0 height=0 style="display:none"></iframe>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图