如何防止 jquery timepicker 中的无效时间值？

Question

我正在使用 JQuery timepicker 并试图阻止用户插入无效字符（字母）。

知道我的系统中有 4 种时间格式，所以我不能使用 RegExp 或掩码。

所以我想知道是否有办法做到这一点。

$('.gcureservationtimepicker').timepicker({
    timeFormat: '@AdminSiteHelper.GCUTimeFormat()',
    // timeFormat: 'HH:mm:ss',
    interval: 15,
    //maxTime: '12:00 PM',
    //defaultTime: '8',
    //startTime: '10:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    change: GenerateNewTimePicker
});

Answer 1

根据我在 Timepicker's Docs 上看到的内容，它基本上可以解释您在该字段中所写的内容，因此禁用字母会限制其功能。

如果您希望将选项限制为仅选择时间之类的选项，我建议您使用 Pickadate as a time picker。用法类似，不过字段是read-only.

更新

如果您不能更改库并需要使用时间选择器，我会考虑限制输入的输入选项。类似于下面的示例。

此外，根据您的兼容性要求，另一种选择可能是使用 <input type="time">，它已经具有您需要的许多限制。

补充说明

如果您愿意，还可以更深入地研究我在下面添加的简单验证，并使用正则表达式或定位。类似于：

字符 1 和 2 只能是从 00 到 23 或从 01 到 12 的数字，具体取决于是 12 小时还是 24 小时。
字符 3 只能是冒号。
字符 4 和 5 只能是数字。
输入字符串最多可以包含 5 个字符。

上述结构的正则表达式（不验证最小和最大数字）可以是：^\d{2}:\d{2}$.

function checkNumber() {
  var e = event || window.event; // get event object
  var key = e.keyCode || e.which; // get key cross-browser

  var allowedKeys = [8, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 186]; // includes backspace, numbers and :

  if (!allowedKeys.includes(key)) {
    if (e.preventDefault) e.preventDefault(); //normal browsers
    e.returnValue = false; //IE
  }
}

<input type="text" id="onlytime" onkeydown="checkNumber()" placeholder="Input time">

<br><br>

<input type="time" id="justintime">

如何防止 jquery timepicker 中的无效时间值？

How prevent invalid time value in jquery timepicker?

jquery

timepicker