页面2个时间选择器和相应的为空校验
?<link href="/JNNQ/css/scs_style.css" rel="stylesheet" type="text/css" />
???
???
??? <style type="text/css">
fieldset {
?margin:10px;
?padding:0 12px 12px 12px;
?border:0px solid #D4D4D4;
?background-color:#F9F9F9;
}
legend {
?font-weight:bold;
}
</style>
<!--
<fieldset>
<legend>说明</legend>
前两年写的东东,不是很规范,可以满足一些基本的功能要求,简单的日历选择,使用浮动的Iframe可以挡住select,月份选择功能,兼容IE6、IE7和FF。
</fieldset>
?-->
<script language="javascript">
/**********************?? 日期选择? ***************************
?* @作者? : Enjoyd
?* @Email? : [email]enjoyd@126.com[/email]
?* @OICQ? : 5003427
?转载请注明出处 <a hreF="http://www.5aiqu.com" target="_blank">http://www.5aiqu.com</a>
'**************************************************************************/
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;" name="divCalendar" id="divCalendar" frameborder="0" scrolling="no"></iframe>')
/*头部信息CSS及JS函数*/
var HeadMsg='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html xmlns="http://www.w3.org/1999/xhtml">'+
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"><!--'+
'body,html{margin:0px;height:100%;background:#FFF;}a,li,input {font-family:"Verdana","Arial";font-size:12px;}'+
'a {height:18px;color:#000;padding-top:2px;text-decoration:none;display:block;}'+
'a:hover{height:17px;padding-top:1px;border:1px solid #000;background:#FFF;}'+
'.CurrentDate {height:17px;padding-top:1px;border:1px solid #000;background: #FFF;}'+
'ul{list-style:none;margin:0px;padding:0px;overflow:hidden;}'+
'ul li{float:left;margin-left:1px;padding-top:1px;display:inline;text-align:center;width:28px;height:20px;}'+
'#Tools {width:204px;background:#5563B0;padding:0px;}'+
'#Tools li{padding-bottom:1px;}'+
'#Tools a{color:#FFF;}'+
'#Tools a:hover{border:1px solid #2E3665;background:#979FCE;}'+
'#Title {width:204px;background:#CAD3E8;border-bottom:1px solid #000;}'+
'#Title li{height:16px;padding-top:2px;}'+
'#sYear,#sMonth {width:44px;height:16px;border:1px solid #88A9C9;border-right:0;padding-top:2px;}'+
'#SArr {width:19px;height:18px;background:#E2EBF4;font-size:10px;text-align:center;color:#5563B0;border:1px solid #88A9C9;border-left:0;margin-right:3px;cursor:pointer;}'+
'#Select {width:63px;border:1px solid #8AC;background:#FFF;height:146px;}'+
'#Select a{height:16px;padding-left:3px;}'+
'#Select a:hover{color:#000;background:#E2EBF4;padding-top:2px;border:0;}'+
'#Select #SelectBn {background:#C7CDEF;font-size:8px;line-height:7px;height:7px;text-align:center;color:#5563B0;}'+
'#Select #SelectBn:hover{background:#7682C1;color:#FFF;}#SArr,#sYear,#sMonth{float:left;}'+
'#SelectYear,#SelectMonth{position:absolute;top:21px;z-index:1;overflow:hidden;display:none;}'+
'--></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:;" onclick="parent.Calendar_Modif(\';Html+=(key=="M")?year+\',\'+i+\',\'+day+\');">\'+parent.MonthText[i]: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[0];'+
'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;" onclick="ShowSelect(\'SelectYear\',\'Y\');"><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;" onclick="ShowSelect(\'SelectMonth\',\'M\');"><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[month]+1:MonthDNum[month];
?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" onclick="ShowSelect(\'SelectYear\',\'Y\');">'+year+'年</div><div id="SArr" onclick="ShowSelect(\'SelectYear\',\'Y\');"><font face="Webdings">6</font></div>'+
?'<div id="sMonth" onclick="ShowSelect(\'SelectMonth\',\'M\');">'+MonthText[month]+'</div><div id="SArr" onclick="ShowSelect(\'SelectMonth\',\'M\');"><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 onClick="javascript:Calendar_GetDate('+year+','+month+',-1);">';
?
?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)?' && !form1.sDate2.value==""){
?????? alert("请选择<开始时间>");
?????? return false;
??? }
?? if(!form1.sDate1.value=="" && form1.sDate2.value==""){
?????? alert("请选择<截至时间>");
?????? return false;
??? }
?? if(form1.sDate1.value=="" &&? form1.sDate2.value==""){
?????? alert("请选择<开始时间>和<截至时间>,本次查询为本月报表情况");
?????? //form1.action.value="servlet/BuLoginSelectServlet";
?????? //alert("测试qqq");
?????? //alert("测试111qqq");
?????? //location.href="servlet/BuLoginSelectServlet";
?????? //window.open("servlet/BuLoginSelectServlet");
?????? return true;
??? }
??????? if(!form1.sDate1.value==""&& !form1.sDate2.value==""){
??????????? var strJHRQ=form1.sDate1.value; //开始时间
??????????? var strJHWCSJ=form1.sDate2.value; //截止时间
??????????? // return false;
??????????? var arrJHRQ=strJHRQ.split('-'); //转成成数组,分别为年,月,日,下同
??????????? var arrJHWCSJ=strJHWCSJ.split('-');
??????????? var dateJHRQ=new Date(parseInt(arrJHRQ[0]),parseInt(arrJHRQ[1])-1,parseInt(arrJHRQ[2]),0,0,0); //新建日期对象
??????????? var dateJHWCSJ=new Date(parseInt(arrJHWCSJ[0]),parseInt(arrJHWCSJ[1])-1,parseInt(arrJHWCSJ[2]),0,0,0);
??????????? if (dateJHRQ>dateJHWCSJ) {???????????????????????????????
??????????????? alert('<截止时间>不能小于<开始时间>');
??????????????? return false;
??????????? }
??? }
?}??
</script>
? </head>??
<body>
<form name="form1" id="myform" method="post" action="servlet/BuLoginSelectBydayServlet">
?? <fieldset>
???????? 开始时间<input? type="text" name="sDate1" id="sDate1" value="" size="10" onClick="return Calendar('sDate1','sDate2');" />
???????? 截止时间<input type="text" name="sDate2" id="sDate2" value="" size="10" onClick="return Calendar('sDate2');" />
??????? <!-- <select><option>可挡住Select</option></select> -->
??
??<input type="submit"? value="按日期时间段查询" name="Submit" onClick="return check1()">
?</fieldset>
</form>
?
?
自己可以看看,拷进jsp 中运行 就知道了!