代码驿站移动版
频道导航
HTML/Xhtml
CSS
JavaScript
HTML5
PHP教程
ASP.NET
正则表达式
AJAX
ThinkPHP
Yii
MySQL
MariaDB
Oracle
MongoDB
Redis
DedeCMS
PHPCMS
帝国CMS
WordPress
Discuz
其它CMS
Zend Studio
Sublime
Notepad
Dreamweaver
Windows
Linux
Nginx
Apache
IIS
CentOS
Ubuntu
Debian
网站优化
工具资源
PHP源码
ASP.NET源码
其它源码
图标素材
按钮素材
字体素材
DedeCMS模板
帝国CMS模板
PHPCMS模板
WordPress模板
Discuz!模板
单页模板
开发软件下载
服务器软件下载
广告投放
联系我们
版权申明
软件编程
网页前端
移动开发
数据库
服务器
脚本语言
PHP代码
JAVA代码
Python代码
Android代码
当前位置：
主页
>
网页前端
>
JavaScript代码
>
javascript 表单日期选择效果
时间：2020-12-15 01:29:00 | 栏目：
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"> <!-- var Timer = new Date(); var years = Timer.getYear(); var months = (Timer.getMonth()+1); var days = Timer.getDate(); var weeks = Timer.getDay(); var Rec_List = ""; Rec_List = ",20020202,20020608,20020815,20021219,20010125,20011105,2001706,20030715,20031203,20030416,"; function GetDays(the_year,the_month){ var Max_day = 31; if (the_month==4 || the_month==6 || the_month==9 || the_month==11){ Max_day = 30; }else if(the_month==2){ if(the_year%400==0){ Max_day = 29; }else if(the_year%100==0){ Max_day = 28; }else if(the_year%4==0){ Max_day = 29; }else{ Max_day = 28; } } return Max_day; } function ShowPlan(the_year,the_month,the_day){ var thisDate = the_year + "-" + (the_month+1) + "-" + the_day; selDate.value=thisDate; selDate.innerText=thisDate; LayerDate.style.visibility='hidden'; } function HideDate(){ if(LayerDate.style.visibility!='hidden'){ LayerDate.style.visibility='hidden'; } } function Calendar(the_year,the_month){ var i = 0; var FontColor; var DateStr; var New_Date = new Date(the_year,the_month,1) var the_week = New_Date.getDay(); var Max_day = GetDays(the_year,the_month+1) var dummy = 7-(the_week+Max_day)%7; var Cal_str = ""; Cal_str += "<table align=center width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#FF9900>"; Cal_str += "<tr bgcolor=#ffcc99>"; Cal_str += "<td width=14% align=center>星期日</td>"; Cal_str += "<td width=14% align=center>星期一</td>"; Cal_str += "<td width=14% align=center>星期二</td>"; Cal_str += "<td width=14% align=center>星期三</td>"; Cal_str += "<td width=14% align=center>星期四</td>"; Cal_str += "<td width=14% align=center>星期五</td>"; Cal_str += "<td width=14% align=center>星期六</td>"; Cal_str += "</tr><tr>\n"; for(i=0;i<the_week;i++){ Cal_str += "<td valign=top align=center bgcolor=#ffffff onmouseout=this.bgColor='#ffffff' onmouseover=this.bgColor='#f2f8ff'> </td>\n"; } for(i=1;i<=Max_day;i++){ FontColor = ((i+the_week)%7==1||(i+the_week)%7==0)?"red":"black" DateStr = "," + the_year + (the_month<9?("0"+(parseInt(the_month)+1)):(parseInt(the_month)+1)) + (i<10?("0"+i):i) + ","; Cal_str += "<td valign=top align=center bgcolor=" + (Rec_List.search(DateStr)!=-1?"#FFCC33":"white") + ((i==days&&the_year==years&&the_month==months-1)?" background=image/now.gif":"") + " onmouseout=this.bgColor='" + (Rec_List.search(DateStr)!=-1?"#FFCC33":"#ffffff") + "' onmouseover=this.bgColor='#f2f8ff'>" Cal_str += "<a href=javascript:ShowPlan(" + the_year + "," + the_month + "," + i + ") style='color: " + FontColor + ";'>" + i + "</a></td>\n"; if((the_week+i)%7==0 && i!=Max_day) Cal_str += "</tr><tr>\n"; } if(dummy < 7){ for(i=1;i<=dummy;i++){ Cal_str += "<td valign=top align=center bgcolor=#ffffff onmouseout=this.bgColor='#ffffff' onmouseover=this.bgColor='#f2f8ff'> </td>\n"; } } Cal_str += "</tr></table>"; return(Cal_str); } function DateChange(mode){ var theYear=parseInt(ShowYear.innerText); var theMonth=parseInt(ShowMon.innerText); if(mode){ theMonth++; if(theMonth>=13){ theYear++; theMonth=1; } }else{ theMonth--; if(theMonth<=0){ theYear--; theMonth=12; } } ShowYear.innerText=theYear; ShowMon.innerText=theMonth; Cal_Tab.innerHTML=Calendar(theYear,theMonth-1); } function YearChange(){ var theYear; theYear=prompt("Please input the year: (0 - 3000)",ShowYear.innerText); if(theYear==null || theYear=="") return false; theYear=parseInt(theYear); theMon=parseInt(ShowMon.innerText); if((theYear+"a")=="NaNa" || theYear>3000 || theYear<0){ alert("输入错误！"); return false; }else{ ShowYear.innerText=theYear; ShowMon.innerText=theMon; Cal_Tab.innerHTML=Calendar(theYear,theMon-1); } setTimeout("LayerDate.style.visibility='visible'",10); } function MonChange(){ var theMon; theMon=prompt("Please input the Month: (1 - 12)",ShowMon.innerText); if(theMon==null || theMon=="") return false; theMon=parseInt(theMon); theYear=parseInt(ShowYear.innerText); if((theMon+"a")=="NaNa" || theMon>12 || theMon<1){ alert("输入错误！"); return false; }else{ ShowYear.innerText=theYear; ShowMon.innerText=theMon; Cal_Tab.innerHTML=Calendar(theYear,theMon-1); } setTimeout("LayerDate.style.visibility='visible'",10); } function showCalendar(){ event.cancelBubble = true; LayerDate.style.top = event.srcElement.offsetTop + event.srcElement.offsetHeight + 2; LayerDate.style.left = event.srcElement.offsetLeft - 150; if(parseInt(LayerDate.style.left)<0) LayerDate.style.left = 0; LayerDate.style.visibility = LayerDate.style.visibility=='hidden'?'visible':'hidden'; return false; } //--> </script> </head> <body onClick="HideDate()"> <p align=center> </p> <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()"> </p> <div id="LayerDate" onClick="event.cancelBubble=true" style="position:absolute; width:300px; height:115px; z-index:1; visibility: hidden; BORDER: 1 solid black;"> <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> </div> <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("<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; 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> <div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand"> <A href="myjs.htm" target=_blank><FONT color=red> My Js Collection!</A><input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> <div style="display:none"><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></div>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
您可能感兴趣的文章:
JavaScript常见事件处理程序实例总结
url传递的参数值中包含&时,url自动截断问题的解决方法
Javascript的匿名函数小结
javascript上下左右定时滚动插件
Javascript别踩白块儿（钢琴块儿）小游戏实现代码
相关文章
11-08
兼容浏览器的js事件绑定函数(详解)
11-27
Javascript实例教程(19) 使用HoTMetal(2)
11-23
Webpack中loader打包各种文件的方法实例
10-05
javascript判断图片是否加载完成的方法推荐
11-22
在javascript中执行任意html代码的方法示例解读
JQuery
VUE
AngularJS
MSSql
MySQL
MongoDB
Redis
Linux
Tomcat
Nginx
网站首页
广告投放
联系我们
版权申明
联系站长