javascript实现年、季度、月、时间段的查询条件切换

效果：

页面代码

 <div align="left">
			                    <input name="stage" type="radio" value="year" onClick="changeDisplay(this)">
			                    年
      		                    <input name="stage" type="radio" value="stage" onClick="changeDisplay(this)">
      		                    季
      		                    <input name="stage" type="radio" value="month" onClick="changeDisplay(this)">
      		                    月
      		                    <input name="stage" type="radio" value="time" onClick="changeDisplay(this)" checked>
      		                    时间段      
		              </div></th> 
      	<td width="439" id="tdObj">    		
	    		<input name="startDate" type="text" class="Wdate" id="startDate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',skin:'whyGreen'})"  />	至<input name="endDate" type="text" class="Wdate" id="endDate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',skin:'whyGreen'})" />    	</td>

JAVASCRIPT代码

<script language="javascript">
function changeDisplay(obj)
{
	var value = obj.value;
	var html = "";
	if(value=="time")
	{
		html = "<input name='startDate' type='text' class='Wdate' id='startDate' οnfοcus=WdatePicker({dateFmt:'yyyy-MM-dd',skin:'whyGreen'})  />	至<input name='endDate' type='text' class='Wdate' id='endDate' οnfοcus=WdatePicker({dateFmt:'yyyy-MM-dd',skin:'whyGreen'}) /> ";
	}
	else if(value == "month")
	{
		html = getYearSelect()+"   "+getMonthSelect();
	}
	else if(value == "stage")
	{
		html = getYearSelect()+"   "+getStageSelect();
	}
	else if(value == "year")
	{
		html = getYearSelect();
	}
	document.getElementById("tdObj").innerHTML = html;
}

function getYearSelect()//获得年份下拉选择框
{
	var m = new Date().getFullYear();
 	var n = m - 12;
 	if (n < 1000) n = 1000;
 	if (n + 14 > 9999) n = 9974;
 	var s = "<select name=yearSelect style='font-size: 12px'>";
 	var selectInnerHTML = s;
	selectInnerHTML += "<option value='"+""+"'>全部</option>\r\n";
 	for (var i = n; i < n + 14; i++)
 	{
  		if (i == m)
    	{
    		selectInnerHTML += "<option value='" + i + "' selected>" + i + "年" + "</option>\r\n";
    	}
  		else
  		{
  			selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "</option>\r\n";
  		}
 	}
 	selectInnerHTML += "</select>";
 	
 	return selectInnerHTML;
}

function getMonthSelect()//获得月份下拉选择框
{
	var m = new Date().getMonth() + 1;
	var s = "<select name=monthSelect style='font-size: 12px'> ";
	var selectInnerHTML = s;
	for (var i = 1; i < 13; i++)
	{
		if (i == m)
	    {
	    	selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"</option>\r\n";
	    }
	  	else
	  	{
	  		selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"</option>\r\n";
	  	}
	 }
	 selectInnerHTML += "</select>";
	 return selectInnerHTML;
}

function getStageSelect()//获得季度下拉选择框
{
	var month = new Date().getMonth() + 1;
	var stage = Math.ceil(month/3);
	var selectInnerHTML = "<select name=stageSelect style='font-size: 12px'> ";
	for (var i = 1; i < 5; i++)
	{
		if (i == stage)
	    {
	    	selectInnerHTML += "<option value='"+i+"' selected>"+i+"季度"+"</option>\r\n";
	    }
	  	else
	  	{
	  		selectInnerHTML += "<option value='"+i+"'>"+i+"季度"+"</option>\r\n";
	  	}
	 }
	 selectInnerHTML += "</select>";
	 return selectInnerHTML;
}

function setDateStage()//获得对应的时间段
{
	var MonHead = new Array(12);     //定义阳历中每个月的最大天数
  	MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;
  	MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;
	var radioObj = document.getElementsByName("stage");
	var tdObj = document.getElementById("tdObj");
	var retBeginDate = "";
	var retEndDate = "";
	for(var i = 0 ; i < radioObj.length; i++)
	{
		var child = radioObj[i];
		if(child.checked && child.value == "month")//获得选择的月份的时间段
		{
			var year = tdObj.children[0].value;
			var month = tdObj.children[1].value;
			if (0==year%4&&((year%100!=0)||(year%400==0)))//判断是否是闰年
			{
				if(month==2)
				{
					MonHead[1] = 29;
				}
			}
			var m = month;
			if(month < 10) month = "0"+month;
			retBeginDate = year+"-"+month+"-"+"01";
			retEndDate = year+"-"+month+"-"+MonHead[m-1];
		}
		else if(child.checked && child.value == "stage")//获得选择季度的时间段
		{
			var year = tdObj.children[0].value;
			var stage = tdObj.children[1].value;
			var startMonth = (stage-1)*3+1;
			var endMonth = stage*3;
			var sMonth = startMonth;
			var eMonth = endMonth;
			if(startMonth < 10) startMonth = "0"+startMonth;
			if(endMonth < 10) endMonth = "0"+endMonth;
			retBeginDate = year+"-"+startMonth+"-"+"01";
			retEndDate = year+"-"+endMonth+"-"+MonHead[eMonth-1];
		}
		else if(child.checked && child.value == "year")//获得选择年的时间段
		{
			var year = tdObj.children[0].value;
			retBeginDate = year+"-01-01";
			retEndDate = year+"-12-31";
		}
		else if(child.checked && child.value == "time")//获得选择时间段的时间段
		{
			retBeginDate = addForm.startDate.value;
			retEndDate = addForm.endDate.value;
		}
		
	}
	document.addForm.beginDate.value = retBeginDate;
	document.addForm.endDate.value = retEndDate;
}

function buttonSubmit()
{
	setDateStage();
	findForm.submit();
}


</script>

具体在后台查询处理过程的代码

传过来的参数有：yearSelect,stageSelect,monthSelect,startDate,endDate，分别判断处理。

		//0.1time
		String yearSelect = request.getParameter("yearSelect");
		String stageSelect = request.getParameter("stageSelect");
		String monthSelect = request.getParameter("monthSelect");
		String startDateString = request.getParameter("startDate");
		String endDateString = request.getParameter("endDate");
		
		String startDate=null;
		String endDate=null;
		
		if(!("").equals(startDateString) && null!=startDateString)
		{
			startDate=startDateString;
		}
		else
		{
			startDate="";
		}
		
		if(!("").equals(endDateString) && null!=endDateString)
		{
			endDate=endDateString;
		}
		else
		{
			endDate="";
		}
		
		String firstPar,secondPar,datePar=null;//firstPar= year/startDate;  secondPar=month/stage/endDate
		
		if(!("").equals(yearSelect) && null!=yearSelect)
		{
			
			
			
			//month,stage,null
			if(!("").equals(monthSelect) && null!=monthSelect)
			{
				//month
				datePar=" and Month([adate]) ="+monthSelect+" and year([adate])="+yearSelect;
			}
			else if(!("").equals(stageSelect) && null!=stageSelect)
			{
				//stage
				secondPar=stageSelect;
				if(secondPar.equals("1"))
				{
					datePar=" and year([adate])="+yearSelect+" and  ( Month([adate])=1 or month([adate])=2 or month([adate])=3 )" ;
				}
				
				if(secondPar.equals("2"))
				{
					datePar=" and year([adate])="+yearSelect+" and  ( month([adate])=4 or month([adate])=5 or month([adate])=6 )" ;
				}
				
				if(secondPar.equals("3"))
				{
					datePar=" and year([adate])="+yearSelect+" and  ( month([adate])=7 or month([adate])=8 or month([adate])=9 )" ;
				}
				
				if(secondPar.equals("4"))
				{
					datePar=" and year([adate])="+yearSelect+" and  ( month([adate])=10 or month([adate])=11 or month([adate])=12 )" ;
				}
			}
			else
			{
				//year
				datePar=" and Year([adate]) ="+yearSelect;
				
			}
			
		}
		else if(!("").equals(startDate) && !("").equals(endDate) )
		{
			//have startDate and endDate
			firstPar=startDate;
			secondPar=endDate;
			datePar=" and main.adate between '"+startDate+"' and  '"+ endDate+"'";
		}
		else
		{
			firstPar="";
			secondPar="";
			datePar="";

		}