JSP頁面中的精確到秒的時間控件
技術(shù):Struts1+jsp+MSql
需求:ncmgt網(wǎng)絡(luò)監(jiān)控系統(tǒng)中顯示用戶的操作日志,并且根據(jù)操作時間查詢用戶的詳細(xì)操作記錄,時間精確到秒
大致效果如下,上圖!
大家可以清晰的看到,紅色畫線部分就是根據(jù)時間查詢,時間精確到秒,不應(yīng)該由用戶手動輸入,不然會大大降低用戶體驗的性能,這是就用到了時間控件,就是這個小時鐘一樣的東西,不過他只是一張圖片而已,我們要知道它后面所隱藏的東西,先給大家展示一下效果吧,當(dāng)我們點擊小時鐘的時候,彈出:
這樣的日歷圖片,可以看見最下面一行是加上時分秒的,默認(rèn)是沒有的哦。
下面說一下怎么實現(xiàn)這個效果。
第一步:
引入js文件
在JSP頁面的頭部
- <script language="javascript" src="http://localhost:8080/ncmgt//js/calendar.js"></script>
第二步:
準(zhǔn)備一張小圖片。
- <!--文本框用來接收用戶選中的時間,并且傳給form里的oplog實體類的屬性-->
- <input type="text" name="oplogSearch.dateBegin" size="16" value="" readonly="readonly" class="textarea1">
- <a href="javascript:buildCal(oplogListForm.elements['oplogSearch.dateBegin'],true)">
- <img id="IMG1" src="http://localhost:8080/ncmgt//img/public/clock.gif" alt="請選擇日期" width="20" height="20" border="0"></a>
當(dāng)用戶選擇了時間,下面這個function就負(fù)責(zé)把時間放進(jìn)文本框并提交表單。
- function closewin(){
- //獲取登錄名和時間
- parent.document.forms["0"].elements["oplogSearch.opname"].value
- =document.forms["0"].elements["oplogSearch.opname"].value;
- parent.document.forms["0"].elements["oplogSearch.dateBegin"].value
- =document.forms["0"].elements["oplogSearch.dateBegin"].value;
- parent.document.forms["0"].elements["oplogSearch.dateEnd"].value
- =document.forms["0"].elements["oplogSearch.dateEnd"].value;
- parent.document.forms["0"].submit();
- parent.document.getElementById('divWindow').style.display="none";
- return false;
- }
并不是提交表單就大功告成了,有一個處理是很重要的,如果用戶選擇的時間是自5.3日 到5.1日。就是我們常說的大于大的,小于小。
這是不符合邏輯的,就像大于3又小于1的數(shù)字,哪里有這樣的呢?為了避免這樣的值傳到后臺的Action,再用戶選擇了時間之后我們應(yīng)該做處理。
- function comparePair(){
- var begin,end;
- begin = document.forms["0"].elements["oplogSearch.dateBegin"].value;
- end = document.forms["0"].elements["oplogSearch.dateEnd"].value;
- if(begin > end && end != ""){
- alert("您選擇的時間有誤!');
- return false;
- }
- return true;
- }
這樣到后臺就好處理了,還有一點我用的MySql數(shù)據(jù)庫,在mySQL中處理時間是不能用to_date()的,那是Oracle里的時間日期函數(shù),我們可以使用Date.format();
例如:
- select count(*) from nc_op_log where 1=1 and date <= DATE_FORMAT('2012-05-03 17:28:39','YYYY-MM-DD HH24:MI:SS') and date >= DATE_FORMAT('2012-05-01 17:28:43','YYYY-MM-DD HH24:MI:SS')
但如果你字段本身的類型就是Date類型的話,什么函數(shù)都不需要,就直接按字符串處理就可以查詢到結(jié)果
例如:
- select count(*) from nc_op_log where 1=1 and date >= '2012-05-01 17:28:43' and date <= '2012-05-03 17:28:39'
原文鏈接:http://blog.csdn.net/se_xiaofeng/article/details/7530159
【編輯推薦】