HTML 中的 JavaScript 時間選擇器示例

Muhammad Muzammil Hussain 2023年10月12日

JavaScript JavaScript Time Picker

JavaScript Time Picker 允許終端使用者從直接輸入值或從彈出視窗中選擇時間。時間可以有多種格式，這取決於你需要哪種格式。

HTML 中的 JavaScript 時間選擇器示例

在這裡，你可以看到 JavaScript 的 clockTimePicker() 方法的示例，該方法幫助使用者從彈出選單中選擇時間值。該方法從 jQuery 庫中獲取幫助來顯示時間選項。

在第一步中，包括以下 CDN。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>

下面的 HTML 原始碼包含了 CDN，並通過給出 id="timePicker" 建立了一個帶有標籤 <input> 的表單元素，並使用 script 標籤中的相同輸入 ID。

<!doctype html>
<html lang="en">
  <head>
    <title>Time Picker</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
  </head>
  <body>
  <form>
     <input type="text" id="timePicker">
  </form>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>
<script>
  $('#timePicker').clockTimePicker();
</script>
</body>
</html>

在上面的 HTML 頁面原始碼中，你可以看到一個簡單的輸入表單型別，用於從終端使用者那裡獲取整數值。我們可以通過在物件中提供選項來包含更多屬性以進一步定製。

$('#timePicker').clockTimePicker({
  duration: true,
  durationNegative: true,
  precision: 5,
  i18n: {cancelButton: 'Abbrechen'},
  onAdjust: function(newVal, oldVal) {
    //...
  }
});

在此處 duration: true，將小時設定設定為大於 23。而 durationNegative 預設為 false，如果其值為 true，則持續時間將為負。

儘管如此，它僅在 duration 條件為真時影響設定。precision 條件以分鐘為單位建立一個序列，例如 precision: 5 允許使用者選擇具有 5 分鐘差值的分鐘步長（6:05、6:10、6:15、6:20, …)。precision 條件僅允許以下值：1、5、10、15、30、60。

cancelButton: 'Abbrechen' 僅適用於移動螢幕。使用此按鈕，你可以取消時間更改。

這裡 function(newVal, oldVal) 是 onAdjust 的預設值。onAdjust 函式在值發生變化時起作用。