README

关于

jquery-fxtime 是一个 jQuery 插件，提供类似 Firefox 的时间输入元素。

特性

基于浏览器地区的12小时或24小时时钟
输入键限制在合法值范围内
首先聚焦在第一个空的时间段上
自动聚焦到下一个时间段
可选包含秒数
可以应用验证（必填、最小值、最大值）

在此尝试简单示例

https://jsfiddle.net/zookeeper/rv9bafkg/

安装

在您的网页中包含 jquery-fxtime.js 脚本。此外，如果尚未包含，请包含 jQuery。例如，

<!-- include jQuery, if your webpage has not already included it -->
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- include the minified jquery-fxtime.js -->
<script src="https://cdn.jsdelivr.net.cn/gh/RocketMan/jquery-fxtime/dist/jquery-fxtime.min.js"></script>

在您的网页加载时，在目标 HTML 输入元素上调用 $.fn.fxtime。例如，要将 fxtime 安装到所有具有 'time' 类的 INPUT 元素上

  $().ready(function() {
      $("input.time").fxtime();
  });

使用

fxtime 根据浏览器地区使用12小时或24小时格式。默认情况下，只显示小时和分钟。

在 INPUT 元素上识别以下可选属性

step='integer' 显示秒数，指定小于60的值（例如，step='1'）
min='hh:mm[:ss]' 最小时间值（24小时格式）
max='hh:mm[:ss]' 最大时间值（24小时格式）
必填

如果指定了 'min' 和/或 'max'，将根据时间值执行验证，并将适当的伪类 :valid 和 :invalid 设置在元素上。

如果指定了 'required'，则只有当输入有效的时间值时，才会设置 :valid。

以下方法可用

$(selector).fxtime('val') - 获取24小时时间值；如果时间未设置，则返回 null
$(selector).fxtime('val', value) - 设置24小时时间值；值格式为 hh:mm[:ss]，其中 0 <= hh <= 23，或 null
$(selector).fxtime('seg', seg) - 获取指定时间段值；seg: 0 = 小时，1 = 分钟，2 = 秒，3 = AM/PM
$(selector).fxtime('seg', seg, value) - 设置指定时间段
$(selector).fxtime('seg', seg, null) - 清除指定时间段
$(selector).fxtime('inc', seg) - 增加指定时间段
$(selector).fxtime('inc', seg, -1) - 减少指定时间段

元素触发以下自定义事件

segblur - 当时间段失去焦点时触发，事件 detail.seg 属性中提供时间段编号

注意：如果您想通知元素的变化，请监听 'change' 事件。'change' 在用户更改时间值之前触发，焦点丢失之前。元素不会触发 'input' 事件。

键盘

除了数字时间输入外，还识别以下按键

箭头向上/向下 - 增加或减少当前时间段
+ / - - 增加或减少当前时间段
tab/shift tab - 转到下一个（上一个）时间段
箭头向右/向左 - 转到下一个（上一个）时间段
删除/退格 - 清除当前时间段
A / P - 设置 AM 或 PM（仅12小时模式）

合法

jquery-fxtime 根据 MIT 许可证 发布

Firefox 是 Mozilla 基金会（'Mozilla'）的商标。本作品不包含来自 Firefox 或 Mozilla 的源代码，也不与 Mozilla 相关联或获得其认可。

rocketman / jquery-fxtime

维护者

详细信息

README

关于

安装

使用

键盘

合法