JSP page implementation by time period query record and quick query __js

How to implement the JSP page as shown above, through the time selection box to query a certain period of business records, the following will be my little experience to share. The time selection box here is to use the My97datepicker JS plug-in, you can download http://www.my97.net/in its official website, official online also has related use method introduction.
Here, we first need to introduce the Wdatepicker.js file in the page

<div class= "cell" style= "WIDTH:126PX;" > <input type= "text" class= "wdate id=" D1 "name=" StartTime "value=" <%=request.getparameter ("starttime") = = Null? "": Request.getparameter ("StartTime")%> "onfocus=" var d2= $dp. $ (' D2 '); Wdatepicker ({onpicked:function () {d2.focus ();},maxdate: ' #F {$dp. $D (\ ' d2\ ')} '}) "/> </div> to <div class=" Cell "style=" WIDTH:126PX; > <input type= "text" class= "Wdate id=" D2 "Name=" Endtime "value=" <%=request.getparameter ("Endtime") ==null? ""
: Request.getparameter ("Endtime")%> "onfocus=" Wdatepicker ({mindate: ' #F {$dp. $D (\ ' d1\ ')} '}) '/> </div> <div class= "Cell" style= "WIDTH:200PX;MARGIN-LEFT:33PX;" > <input class= "list_btn" value= "Query" type= "submit"/> </div> 

Here we use the Wdatepicker plug-in implementation of the effect is: In the first time selection box to select the time StartTime, the second time selection box will automatically pop up, while the choice of time Endtime to meet endtime>= StartTime. Of course, you can also according to their actual needs, choose a different effect, you can see the results in http://www.my97.net/dp/demo/index.htm.
Value here is used in this way to obtain, because the implementation of the click "Query" button, to obtain relevant data information at the same time the page will automatically refresh, after refreshing the value of the,<input> tag will be emptied, and generally speaking, click on the query, time should be retained to display, To remind users of what time period the data is being queried, so this is the way it is used here.

After choosing the time, we need to get time in the background to do the processing, where the background code is not posted. In many cases, the amount of data can be very large because of time. So there will be a quick query the need for a short period of time, like the net silver in the view of the day or a week, one months of the function of the transaction, here the idea is to achieve by clicking the relevant quick query links, triggering a series of actions, That is, first change the value of D1 and D2 in the time input box, and then trigger the Submit button, where we use the JS function to achieve this effect.
First, for today, we need to automatically get the current time of the system, and assign it to "D1" and "D2", because the system time is accurate to the second, and we only need to be accurate to the day, so we need to format the time conversion; second, for "Week" and "30 days", the realization of the idea is, First, the current system time after the format conversion, assigned to "D2", and then the converted system time minus 6 days and 29 talent value to "D1" can be. Implemented primarily through the following JavaScript code:

	An extension to date that converts date to a string//example in the specified format://(New Date ()). Format ("Yyyy-mm-dd hh:mm:ss") ==> 2014-03-02 08:09:04//(New Date ()). Format ("Yyyy-mm-dd") ==> 2014-03-02 Date.prototype.Format = function (fmt) {var o = {"m+": This.getmonth () + 1,//month "d+": this.getdate (),//day "h+": this.gethours (),//Hour "m+": this.getminutes (),//min "s+":
		This.getseconds (),//sec "q+": Math.floor (This.getmonth () + 3)/3),//Quarter "S": this.getmilliseconds ()/MS};
		if (/(y+)/.test (FMT)) FMT = Fmt.replace (regexp.$1, (this.getfullyear () + ""). substr (4-regexp.$1.length)); For (var k in O) if (new RegExp ("+ K +")). Test (FMT)) FMT = fmt. Replace regexp.$1, (Re Gexp.$1.length = 1)?
		(O[k]): (("+ o[k]"). substr (("" + o[k). length));
	return FMT; //Get the current date and format var time = new Date ().

	Format ("Yyyy-mm-dd");
		Add and subtract a function adddate (date, days) {var d = new Date (date); D.sEtdate (d.getdate () + days);
		var m = d.getmonth () + 1;
	return d.getfullyear () + '-' + M + '-' + d.getdate (); //Where the date parameter is to be added and minus the days when the parameter is to be added to the number of day, if the forward calculation on the incoming negative numbers, then the incoming positive numbers, if it is to carry out the month of addition and subtraction, call Setmonth () and getmonth () on it,	 Note that the returned month is calculated starting at 0, which means that the returned month is one months less than the actual month, so add 1 accordingly.

	Today's date setting function is now
	() {
		document.getElementById ("D1"). Value = time;
		document.getElementById ("D2"). Value = time;
		document.getElementById ("MyForm"). Submit ();
	The week date sets the
	function week () {
		document.getElementById ("D1"). Value = Adddate (Time,-6);
		document.getElementById ("D2"). Value = time;
		document.getElementById ("MyForm"). Submit ();
	The 30 day date sets the
	function month () {
		document.getElementById ("D1"). Value = Adddate (time, -29);
		document.getElementById ("D2"). Value = time;
		document.getElementById ("MyForm"). Submit ();
	

The JSP page call looks like this:

<div class= "Cell" >
<a href= "#" onclick= "Today ()" style= "text-decoration:underline;" > Today </a>
</div>
<div class= "cell" >
<a href= "#" onclick= "Week ()" style= " Text-decoration:underline; " > Week </a>
</div>
<div class= "cell" >
<a href= "#" onclick= "month ()" style= " Text-decoration:underline; " > 30 days </a>
</div>

Here, the control page to display the CSS code is not posted, because it is very simple, the reason to release it, one is to share learning with the small experience, but also backup, I believe that the following learning should also use these.