Effect:
Page code
<div align="left"> <input name="stage" type="radio" value="year" onClick="changeDisplay(this)"> \t\t\t Year <input name="stage" type="radio" value="stage" onClick="changeDisplay(this)"> season <input name="stage" type="radio" value="month" onClick="changeDisplay(this)"> \t\t moon <input name="stage" type="radio" value="time" onClick="changeDisplay(this)" checked> \t\t period </div></th> <td width="439" id="tdObj"> <input name="startDate" type="text" class="Wdate" id="startDate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',skin :'whyGreen'})" /> to <input name="endDate" type="text" class="Wdate" id="endDate" onFocus="WdatePicker({ dateFmt:'yyyy-MM-dd',skin:'whyGreen'})" /> </td>
JAVASCRIPT code
<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'}) /> to <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()//Get the year drop-down selection box { 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='" + "" + "'>All</option>\r\\ "; for (var i = n; i < n + 14; i + + ) { if (i == m) { selectInnerHTML + = "<option value='" + i + "' selected>" + i + "year" + "</option>\r\\ "; } else { selectInnerHTML + = "<option value='" + i + "'>" + i + "year" + "</option>\r\\ "; } } selectInnerHTML + = "</select>"; \t return selectInnerHTML; } function getMonthSelect()//Get the month drop-down selection box { 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 + "month" + "</option>\r\\ "; } else { selectInnerHTML + = "<option value='" + i + "'>" + i + "month" + "</option>\r\\ "; } } selectInnerHTML + = "</select>"; return selectInnerHTML; } function getStageSelect()//Get the quarter drop-down selection box { 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 + "quarter" + "</option>\r\\ "; } else { selectInnerHTML + = "<option value='" + i + "'>" + i + "Quarter" + "</option>\r\\ "; } } selectInnerHTML + = "</select>"; return selectInnerHTML; } function setDateStage()//Get the corresponding time period { var MonHead = new Array(12); //Define the maximum number of days in each month in the solar calendar 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 & amp; & amp; child.value == "month")//Get the time period of the selected month { var year = tdObj.children[0].value; var month = tdObj.children[1].value; if (0==year%4 & amp; & amp;((year 0!=0)||(year@0==0)))//Determine whether it is a leap year { 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 & amp; & amp; child.value == "stage")//Get the time period of the selected quarter { 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 & amp; & amp; child.value == "year")//Get the time period of the selected year { var year = tdObj.children[0].value; retBeginDate = year + "-01-01"; retEndDate = year + "-12-31"; } else if(child.checked & amp; & amp; child.value == "time")//Get the time period of the selected time period { retBeginDate = addForm.startDate.value; retEndDate = addForm.endDate.value; } \t\t } document.addForm.beginDate.value = retBeginDate; document.addForm.endDate.value = retEndDate; } function buttonSubmit() { setDateStage(); findForm.submit(); } </script>
Specific code for query processing in the background
The passed parameters are: yearSelect, stageSelect, monthSelect, startDate, endDate, which are judged and processed separately.
//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"); \t\t String startDate=null; String endDate=null; \t\t if(!("").equals(startDateString) & amp; & amp; null!=startDateString) { startDate=startDateString; } else { startDate=""; } \t\t if(!("").equals(endDateString) & amp; & amp; null!=endDateString) { endDate=endDateString; } else { endDate=""; } \t\t String firstPar,secondPar,datePar=null;//firstPar= year/startDate; secondPar=month/stage/endDate \t\t if(!("").equals(yearSelect) & amp; & amp; null!=yearSelect) { \t\t\t \t\t\t \t\t\t //month,stage,null if(!("").equals(monthSelect) & amp; & amp; null!=monthSelect) { //month datePar=" and Month([adate]) =" + monthSelect + " and year([adate])=" + yearSelect; } else if(!("").equals(stageSelect) & amp; & amp; 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 )" ; } \t\t\t\t if(secondPar.equals("2")) { datePar=" and year([adate])=" + yearSelect + " and ( month([adate])=4 or month([adate])=5 or month([adate])=6 )" ; } \t\t\t\t if(secondPar.equals("3")) { datePar=" and year([adate])=" + yearSelect + " and ( month([adate])=7 or month([adate])=8 or month([adate])=9 )" ; } \t\t\t\t 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; \t\t\t\t } \t\t\t } else if(!("").equals(startDate) & amp; & amp; !("").equals(endDate) ) { //have startDate and endDate firstPar=startDate; secondPar=endDate; datePar=" and main.adate between '" + startDate + "' and '" + endDate + "'"; } else { firstPar=""; secondPar=""; datePar=""; }