JSP 實現精確到秒的日期時間選擇控件

在網絡監控系統操作日誌查詢中，需按操作時間精確到秒篩選記錄。手動輸入易出錯且體驗差，引入 JavaScript 日曆控件可彈出視覺化面板供用戶點選年月日時分秒，大幅提升交互體驗。

技術棧與需求

• 架構：Struts 1 + JSP + MySQL
• 需求：操作日誌查詢，時間範圍精確到秒
• 效果：點擊時鐘圖示彈出含時分秒的日曆面板，選中後自動填入唯讀文本框並提交查詢

實作步驟

1. 引入日曆腳本

<script language="javascript" src="/ncmgt/js/calendar.js"></script>

2. 頁面佈局：輸入框 + 觸發圖示

<input type="text" name="oplogSearch.dateBegin" size="16" readonly class="textarea1">
<a href="javascript:buildCal(oplogListForm.elements['oplogSearch.dateBegin'],true)">
  <img src="/ncmgt/img/public/clock.gif" alt="請選擇日期" width="20" height="20" border="0">
</a>

buildCal 為 calendar.js 提供的函數，第二參數 true 表示啟用時分秒選擇。

3. 選中後自動提交邏輯

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;
}

4. 前端時間邏輯校驗

防止開始時間晚於結束時間：

function comparePair(){
  var begin = document.forms[0].elements["oplogSearch.dateBegin"].value;
  var end = document.forms[0].elements["oplogSearch.dateEnd"].value;
  if(begin > end && end != ""){
    alert("您選擇的時間有誤!");
    return false;
  }
  return true;
}

後端 MySQL 時間範圍查詢

若欄位類型為 DATETIME/TIMESTAMP，可直接字符串比較，無需 DATE_FORMAT：

SELECT count(*) FROM nc_op_log 
WHERE date >= '2012-05-01 17:28:43' AND date <= '2012-05-03 17:28:39'

若需格式化轉換，MySQL 使用 DATE_FORMAT 而非 Oracle 的 to_date。

總結

結合成熟的 JS 日曆庫與少量前端校驗，即可實現精確到秒的時間篩選，兼顧用戶體驗與數據準確性，適用於各類日誌、審計、監控系統。