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