HTML 中的 JavaScript 时间选择器示例

Muhammad Muzammil Hussain 2022年5月10日
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:056:106:156:20, …)。precision 条件仅允许以下值:1510153060

cancelButton: 'Abbrechen' 仅适用于移动屏幕。使用此按钮,你可以取消时间更改。

这里 function(newVal, oldVal)onAdjust 的默认值。onAdjust 函数在值发生变化时起作用。