HTML 中的 JavaScript 時間選擇器示例
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 函式在值發生變化時起作用。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe