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 函数在值发生变化时起作用。