JS日期控件及输入验证-Html/Css-WEB前端-六狼论坛-IT论坛-计算机论坛

flatfish2000 发表于 2013-2-7 15:11:31

JS日期控件及输入验证

一：手工输入日期
<html><head><script type="text/javascript">function check(){if(document.getElementById("begin").value!=""&&document.getElementById("end").value!=""){var begin = document.getElementById("begin").value.replace(/-/g,"/");var end = document.getElementById("end").value.replace(/-/g,"/");if(Date.parse(begin)> Date.parse(end)){alert("开始时间大于结束时间");}else{alert("输入正确");}//document.form1.submit();}else{alert("请输入日期");}}</script></head><body><form name="form1" id="form1">输入格式为yyyy-MM-dd<hr>开始时间<input type="text" name="begin" id="begin">结束时间<input type="text" name="end" id="end"><input type="button" value="提交" > </form></body></html>

二：js控件输入及验证
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">function check(){ if(document.getElementById("date1").value!=""&&document.getElementById("date2").value!=""){var begin = document.getElementById("date1").value.replace(/-/g,"/");var end = document.getElementById("date2").value.replace(/-/g,"/");if(Date.parse(begin)> Date.parse(end)){alert("开始时间大于结束时间");document.getElementById("date1").value = "";document.getElementById("date2").value = "";}else{alert("输入正确");}//document.form1.submit(); } else { alert("请输入日期"); }}</script><script language="javascript">/********************** 日期选择*************************** * @作者: Enjoyd * @Email: enjoyd@126.com * @OICQ: 5003427 转载请注明出处 http://www.5aiqu.com'**************************************************************************/var MonthDNum=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);var MonthText=new Array("","一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");var Calendar_obj,Calendar_obj2;//var WriteHead=1;document.write('<iframe style="position:absolute;width:206px;display:none; z-index:1;" name="divCalendar" id="divCalendar" frameborder="0" scrolling="no" style=""></iframe>')/*头部信息CSS及JS函数*/var HeadMsg='<style type="text/css"></style><scr'+'ipt language="JavaScript">var mdown,sy,ey,sm,em,HideSelect=1,CurrentSelect,year,month,day;function Scroll(str,key)'+'{var Html="",s,e,obj,d;'+'if(key=="Y"){s=sy;e=ey;obj="SelectYearItem";d="年";}if(key=="M"){s=sm;e=em;obj="SelectMonthItem";d="";}'+'if(str=="Up"){s--;e--;}if(str=="Next"){s++;e++;}'+'if(key=="Y"){sy=s;ey=e;}if(key=="M"){if(s<1)s=1;if(s>6)s=6;if(e<7)e=7;if(e>12)e=12;sm=s;em=e;}'+'for(i=s;i<=e;i++){Html+=\'<a href="javascript:;" M")?year+\',\'+i+\',\'+day+\');">\'+parent.MonthText:i+\',\'+month+\',\'+day+\');">\'+i;Html+=d+"</a>";}'+'document.getElementById(obj).innerHTML=Html;}'+'function KeyDown(str){if(str==38){Scroll("Up",CurrentSelect);}if(str==40){Scroll("Next",CurrentSelect);}}'+'function ShowSelect(str,str2){HideSelect=0;HSelect();Scroll(\'\',str2);document.getElementById(str).style.display="block";CurrentSelect=str2}'+'function HSelect(){document.getElementById("SelectYear").style.display="none";document.getElementById("SelectMonth").style.display="none";}'+'function Calendar_GetDate(y,m,d)'+'{var objEvent=window.event||arguments.callee.caller.arguments;'+'var srcElement=objEvent.srcElement;'+'if(!srcElement){srcElement=objEvent.target;}'+'if(srcElement.tagName=="A"){parent.Calendar_GetDate(y,m,srcElement.innerHTML);}}'+'document.onclick=function(){if(HideSelect){HSelect();}HideSelect=1;}</scr'+'ipt><body onkeydown="KeyDown(event.keyCode);">'+'<div id="SelectYear" style="left:31px;" ><div id="Select"><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Up\\\',\\\'Y\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-bottom:1px solid #5563B0;"><font face="Webdings">5</font></a><div id="SelectYearItem">'+'</div><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Next\\\',\\\'Y\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-top:1px solid #5563B0;"><font face="Webdings">6</font></a></div></div>'+'<div id="SelectMonth" style="left:99px;" ><div id="Select"><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Up\\\',\\\'M\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-bottom:1px solid #5563B0;"><font face="Webdings">5</font></a><div id="SelectMonthItem">'+'</div><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll(\\\'Next\\\',\\\'M\\\')\',50);" onmouseup="window.clearInterval(mdown);" onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-top:1px solid #5563B0;"><font face="Webdings">6</font></a></div></div>';function Calendar_Show(year,month,day){ var content;var date=new Date();var DayNum=(IsLeapYear(year)&&month==2)?MonthDNum+1:MonthDNum; var date2=new Date(year,month-1,1) var start=date2.getDay(); var date2=null; var Trn=Math.ceil((DayNum+start)/7);var PrNum=1;content='<scr'+ 'ipt language="JavaScript">year='+year+',month='+month+',day='+day+',sy=year-3;ey=year+3;'+ 'sm=(month-3<1)?1:(+month-3>6)?6:month-3;'+ 'em=(month+3<7)?7:(month+3>12)?12:month+3;</scr'+ 'ipt><div style="border:1px solid #6A84C8;height:'+(64+21*Trn)+'px;"><ul><li style="background:#FFF;"></li>'+ '<li style="width:144px;background:#FFF;padding-bottom:1px;" id="SelectArea"><div id="sYear">'+year+'年</div><div id="SArr" ><font face="Webdings">6</font></div>'+ '<div id="sMonth">'+MonthText+'</div><div id="SArr" ><font face="Webdings">6</font></div>'; content+='</li>'+ '<li><a href="javascript:parent.Calendar_hide();">×</a></li></ul>'+ '<div id="Tools"><ul>'+ '<li><a href="javascript:parent.Calendar_Modif('+(year-1)+','+month+','+day+');">«</a></li>'+ '<li><a href="javascript:parent.Calendar_Modif('+year+','+(month-1)+','+day+')";>‹</a></li>';if(Calendar_obj2){content+='<li style="width:42px;"><a href="javascript:parent.Calendar_GetDate('+year+','+month+',0);">本月</a></li>'+ '<li style="width:43px;"><a href="javascript:parent.Calendar_GetDate('+date.getFullYear()+','+(date.getMonth()+1)+','+date.getDate()+');">本日</a></li>';} else{content+='<li style="width:86px;"><a href="javascript:parent.Calendar_GetDate('+date.getFullYear()+','+(date.getMonth()+1)+','+date.getDate()+');">选择本日</a></li>';}content+='<li><a href="javascript:parent.Calendar_Modif('+year+','+(month+1)+','+day+');">›</a></li>'+ '<li><a href="javascript:parent.Calendar_Modif('+(year+1)+','+month+','+day+');">»</a></li>'+ '</ul></div>'+ '<div id="Title"><ul><li style="color:#F00;">日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li style="color:#F00;">六</li></ul></div>'+ '<ul >';var date=null;if(start>0){content+='<li style="width:'+(start*29-1)+'px;"></li>';} for(i=1;i<=DayNum;i++) {content+='<li><a href="#"'content+=(day==PrNum)?' class="CurrentDate"':'';content+=((i+start)%7<2)?' style="color:#F00;"':'';content+='>'+PrNum+'</a></li>';PrNum++; } content+='</ul></div>';//层定位 var Calendar=document.getElementById('divCalendar'); Calendar.style.height=66+21*Trn+'px';//框架高度 divCalendar.document.open() divCalendar.document.write(HeadMsg+content); divCalendar.document.close()var p=Calendar_obj; var eT=0,eL=0,eH=0,dH=0,sT=0,eP=p while(p&&p.tagName!="BODY"){ eT+=p.offsetTop;//距窗口顶部距离 eL+=p.offsetLeft;//距窗口左边距离 p=p.offsetParent;} var eH=eP.offsetHeight; //输入框高度var eW=eP.offsetWidth; //输入框宽度var dH=Calendar.style.pixelHeight; //框架高度Calendar.style.top=(eT+dH>document.body.scrollHeight&&eT-dH>=0)?eT-dH+'px':eT+eH+'px'; Calendar.style.left=(eL+206>document.body.scrollWidth&&eL-206+eW>=0)?eL-206+eW+'px':eL+'px'; setTimeout("document.getElementById('divCalendar').style.display=''",1);}/*是否润年*/function IsLeapYear(y){if(0==y%4&&((y%100!=0)||(y%400==0))){return true;}else{return false;}}function Calendar_Modif(y,m,d){ if(m<1){m=12;y=y-1;} if(m>12){m=1;y=y+1;} var num=(IsLeapYear(y)&&m==2)?MonthDNum+1:MonthDNum; if(d>num){d=num;} Calendar_Show(y,m,d)}function Calendar(obj,obj2){var p=Calendar_obj=document.getElementById(obj); Calendar_obj2=document.getElementById(obj2); var re=/\d{4}-\d{1,2}-\d{1,2}/; var arr,Sdate; arr=re.exec(Calendar_obj.value); if(arr!=null){Sdate=Calendar_obj.value;} else{var mydate=new Date(); Sdate=mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();}Sdate=Sdate.split("-"); Calendar_Show(parseInt(Sdate),parseInt(Sdate),parseInt(Sdate));}function Calendar_GetDate(y,m,d){if(!Calendar_obj2||d!=0){ if(d>0){Calendar_obj.value=y+'-'+m+'-'+d;} else{var objEvent=divCalendar.event||arguments.callee.caller.arguments;var srcElement=objEvent.srcElement;if(!srcElement){srcElement=objEvent.target;}Calendar_obj.value=y+'-'+m+'-'+srcElement.innerHTML; }}else{ if(IsLeapYear(y)&&m==2){num=MonthDNum+1;} else{num=MonthDNum;} Calendar_obj.value=y+'-'+m+'-1'; Calendar_obj2.value=y+'-'+m+'-'+num;}Calendar_hide();}function Calendar_hide(){document.getElementById("divCalendar").style.display="none";}document.onclick=Calendar_hide;</script><script type="text/javascript">function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') { window.onload = func;} else { window.onload = function() { oldonload(); func(); }}}function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){// test to see if the hint span exists firstif (inputs.parentNode.getElementsByTagName("span")) { // the span exists!on focus, show the hint inputs.onfocus = function () { this.parentNode.getElementsByTagName("span").style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs.onblur = function () { this.parentNode.getElementsByTagName("span").style.display = "none"; }} } // repeat the same tests as above for selects var selects = document.getElementsByTagName("select"); for (var k=0; k<selects.length; k++){if (selects.parentNode.getElementsByTagName("span")) { selects.onfocus = function () { this.parentNode.getElementsByTagName("span").style.display = "inline"; } selects.onblur = function () { this.parentNode.getElementsByTagName("span").style.display = "none"; }} }// repeat the same tests as above for textarea var selects = document.getElementsByTagName("textarea"); for (var k=0; k<selects.length; k++){if (selects.parentNode.getElementsByTagName("span")) { selects.onfocus = function () { this.parentNode.getElementsByTagName("span").style.display = "inline"; } selects.onblur = function () { this.parentNode.getElementsByTagName("span").style.display = "none"; }} }}addLoadEvent(prepareInputsForHints);</script></head><body><form name="form1" id="form1">输入格式为yyyy-MM-dd<hr>开始时间<input type="text" name="date1" id="date1" ;>结束时间<input type="text" name="date2" id="date2" value="" ;><input type="button" value="提交" > </form></body></html>

页: [1]

六狼论坛's Archiver

JS日期控件及输入验证