在jsp頁面中怎樣實現如上圖所示的，通過時間選擇框來查詢某一段時間的業務記錄呢，下面將我的一點小經驗分享給大家。這裡的時間選擇框使用的是My97DatePicker的js外掛程式，可以在其官網下載http://www.my97.net/，官網上也有相關的使用方法介紹。
在這裡，我們首先需要在在頁面<head>標籤中引入使用的WdatePicker.js檔案，然後在<body>標籤中插入兩個<div>標籤，分別在每個<div>中插入一個<input>標籤，如下所示
<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>至<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="查詢" type="submit" /></div>
這裡我們使用的WdatePicker外掛程式實現的效果為：在第一個時間選擇框中選擇時間startTime後，第二個時間選擇框會自動彈出，同時，可選擇的時間endTime滿足endTime>=startTime.當然大家也可以根據自己的實際需要，選擇不同的效果，可在http://www.my97.net/dp/demo/index.htm查看示範效果。
這裡的value之所以用這種方式來獲得，是因為實現點擊“查詢”按鈕，獲得相關資料資訊的同時頁面會自動重新整理，重新整理後，<input>標籤中的值會清空，而一般來說，點擊查詢後，時間應該保留顯示，以提醒使用人員查詢的是什麼時間段的資料，所以這裡就採用這種方式。
選擇了時間後，我們需要在後台擷取時間進行相關處理，在這裡就不貼出後台代碼了。在很多時候，由於時間久了資料量會很大，於是就會有快速查詢短時間內資料的需要，就像網銀中有查看當天或者一周、一個月的交易記錄的功能，這裡實現的思路就是通過點擊相關的快速查詢連結，觸發一系列動作，即首先改變時間輸入框中d1和d2的值，然後觸發submit按鈕，這裡我們通過js函數來實現這種效果。
首先，對於“今天”來說，我們需要自動擷取系統目前時間，並將其賦值給“d1”和“d2”，由於擷取的系統時間精確到秒，而我們這裡只需要精確到天，因此需要對時間進行格式轉換；其次，對於“一周”和“三十天”來說，實現的思路是，首先將當前系統時間經過格式轉換後，賦值給“d2”,然後再分別將轉換後的系統時間減去6天和29天賦值給“d1”即可。主要通過下面的JavaScript代碼實現：
// 對Date的擴充，將 Date 轉化為指定格式的String // 例子： // (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, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小時 "m+" : this.getMinutes(), //分 "s+" : this.getSeconds(), //秒 "q+" : Math.floor((this.getMonth() + 3) / 3), //季度 "S" : this.getMilliseconds()//毫秒 };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,(RegExp.$1.length == 1) ? (o[k]): (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}//擷取當前日期，並進行格式化var time = new Date().Format("yyyy-MM-dd");//對日期進行加減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();}//其中，date參數是要進行加減的日期，days參數是要加減的天數，如果往前算就傳入負數，往後算就傳入正數，如果是要進行月份的加減，就調用setMonth()和getMonth（）就可以了，需要注意的是返回的月份是從0開始計算的，也就是說返回的月份要比實際月份少一個月，因此要相應的加上1。
//“今天”日期設定function today() {document.getElementById("d1").value = time;document.getElementById("d2").value = time;document.getElementById("myform").submit();}//“一周”日期設定function week() {document.getElementById("d1").value = addDate(time, -6);document.getElementById("d2").value = time;document.getElementById("myform").submit();}//“三十天”日期設定function month() {document.getElementById("d1").value = addDate(time, -29);document.getElementById("d2").value = time;document.getElementById("myform").submit();}
jsp頁面調用如下所示:
<div class="cell" ><a href="#" onclick="today()" style="text-decoration:underline;">今天</a></div><div class="cell"><a href="#" onclick="week()" style="text-decoration:underline;">一周</a></div><div class="cell"><a href="#" onclick="month()" style="text-decoration:underline;">三十天</a></div>
在這裡，控制頁面顯示的css代碼就不貼出來了，因為實在很簡單，之所以把它發布出來，一是與大家分享學習中的小經驗，同時也是備份，相信後面的學習中應該還會用到這些的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
