README

jquery.timepicker是一个受Google Calendar启发的轻量级jQuery时间选择插件。它支持鼠标和键盘导航，压缩后大小为5.5KB。

要求

jQuery (>= 3.0)

用法

$('.some-time-inputs').timepicker(options);

在您的页面中包含jquery.timepicker.css和jquery.timepicker.min.js。

options是一个可选的javascript对象，其参数如下所述。

您还可以将选项设置为输入元素的数据属性，例如<input type="text" data-time-format="H:i:s" />。时间选择器仍需要通过调用$('#someElement').timepicker(options);来初始化。数据属性将覆盖任何冲突的初始化选项。

所有选项的默认值都通过$.fn.timepicker.defaults对象公开。在此对象中更改的属性（与构造函数中可配置的相同属性）将影响更改后创建的每个实例。

选项

appendTo
覆盖下拉列表附加的位置。
可以是用于选择器的字符串、传递给参数的函数或直接使用的jQuery对象。
默认值: "body"
className
应用于包含时间选择器下拉列表的HTML元素的类名。
默认值: null
closeOnScroll
当选择的元素滚动时关闭时间选择器。（模仿<select>的行为。）可以是用于选择器的字符串、HTML元素或布尔值（true绑定到document滚动）。
默认值: false
closeOnWindowScroll 已弃用
当窗口滚动时关闭时间选择器。（模仿<select>的行为。）
默认值: false
disableTimeRanges
禁用某些时间范围的选定。输入是时间对的数组，如[['3:00am', '4:30am'], ['5:00pm', '8:00pm']]。将禁用时间间隔的开始，但不会禁用结束。默认值: []
disableTextInput
禁用时间选择器输入框中的输入；强制用户从列表中选择。更多信息在这里。
默认值: false
disableTouchKeyboard
禁用触摸设备的屏幕键盘。在某些情况下，Firefox或Chrome可能已启用触摸事件（例如Surface平板电脑上的触摸事件，但实际上不是触摸设备。在这种情况下，disableTouchKeyboard将防止时间选择器输入字段被聚焦。更多信息在这里。
默认值: false
durationTime
与showDuration计算相对时间的基准时间。接受时间字符串、Date对象、午夜以来的整数秒或返回这些类型之一的函数。
默认值: minTime
forceRoundTime
当时间选择器失去焦点时强制更新时间到step设置。
默认值: false
lang
时间选择器中使用的语言常量。可以通过传递包含以下属性之一的对象来覆盖默认值：decimal, mins, hr, hrs。
默认: { am: 'am', pm: 'pm', AM: 'AM', PM: 'PM', decimal: '.', mins: 'mins', hr: 'hr', hrs: 'hrs' }
listWidth
设置为覆盖CSS样式并设置列表宽度与输入元素宽度匹配。设置为1以匹配输入宽度，2为输入宽度的两倍，.5为输入宽度的一半等。设置为null以让CSS决定列表宽度。
默认: null (CSS样式)
maxTime
下拉列表中应该最后显示的时间。可以用来限制时间选项的范围。接受时间字符串、Date对象、午夜后的整数秒数或返回这些类型之一的函数。
默认: minTime之后的24小时
minTime
下拉列表中应该首先显示的时间。接受时间字符串、Date对象、午夜后的整数秒数或返回这些类型之一的函数。
默认: 12:00am
noneOption
将一个或多个自定义选项添加到下拉列表的顶部。可以接受几种不同的值类型
布尔型 (true)：添加一个“无”选项，该选项的结果为空输入值
字符串：添加一个带有自定义标签的选项，该选项的结果为空输入值
对象：类似于字符串，但允许自定义元素的类名和结果输入值。可以包含label、value和className属性。value必须是字符串类型。
数组：字符串或对象的数组，用于添加多个非时间选项
默认值: false
orientation
默认情况下，时间选择器下拉列表将定位到输入元素的右下角，或者如果下方空间不足，则定位到左上角。通过l（左）、r（右）、c（水平居中）、t（顶部）和b（底部）强制定位。例如：tl、rb。默认: 'l'
roundingFunction
用于计算舍入时间的函数。该函数将接收到时间和设置对象作为参数。函数应该处理秒数的null值。默认: 向最近的步长舍入
scrollDefault
如果没有选择时间值，设置下拉列表的滚动位置以显示提供的时间，例如“09:00”。接受时间字符串、Date对象、午夜后的整数秒数或返回这些类型之一的函数。
默认值: null
selectOnBlur
当时间选择器失去焦点时，使用当前突出显示的时间值更新输入。
默认值: false
show2400
使用24小时时间格式时，显示“24:00”作为选项。您还必须设置timeFormat才能使此选项生效。
默认值: false
showDuration
显示下拉列表中每个项目的相对时间。minTime或durationTime必须设置。
默认值: false
showOn
当输入触发特定事件时显示时间选择器下拉列表。设置为null或空数组以禁用自动显示。设置应为字符串数组。默认: ['click', 'focus']
step
下拉列表中每个项目之间的时间量，以分钟为单位。或者，您也可以指定一个函数来动态生成步长。该函数将接收到计数整数（0、1、2...）并期望返回一个步长整数。
默认: 30
stopScrollPropagation
在选择器的边缘滚动时，防止父容器()滚动。默认: false
timeFormat
时间应在列表和输入元素中如何显示。使用PHP的date()格式化语法。可以使用前导双斜杠来转义字符（例如H\\hi）。或者，您也可以指定一个函数而不是字符串，以使用完全自定义的时间格式。在这种情况下，格式化函数将接收到Date对象并期望返回一个格式化时间字符串。默认: 'g:ia'
typeaheadHighlight
在表单输入中输入值时，突出显示最近对应的选项作为值。
默认：true
useSelect
将输入转换为HTML <SELECT> 控件。这对于小屏幕设备或您想防止用户输入任意值时非常理想。此选项与以下选项不兼容：appendTo、closeOnScroll、closeOnWindowScroll、disableTouchKeyboard、forceRoundTime、scrollDefault、selectOnBlur、typeAheadHighlight。
默认值: false
wrapHours
如果输入的时间大于24小时（例如27:30），则应用模24以创建有效的时间。将此设置为false将导致输入27:30导致timeFormatError事件。
默认：true

方法

getSecondsFromMidnight
获取时间作为从午夜开始计算的整数。
```
 $('#getTimeExample').timepicker('getSecondsFromMidnight');
```
getTime
使用JavaScript Date对象获取时间，相对于Date对象（默认：今天的日期）。
```
 $('#getTimeExample').timepicker('getTime');
 $('#getTimeExample').timepicker('getTime', new Date());
```
您可以使用jQuery的内置val()函数以字符串形式获取时间。
```
 $('#getTimeExample').val();
```
hide
关闭时间选择器的下拉菜单。
```
 $('#hideExample').timepicker('hide');
```
isVisible
检查附加到特定输入的时间选择器是否可见。与useSelect选项不兼容。
```
 $('#hideExample').timepicker('isVisible');
```

option
更改现有时间选择器的设置。在可见的时间选择器上调用option将导致选择器被隐藏。

 $('#optionExample').timepicker({ 'timeFormat': 'g:ia' }); // initialize the timepicker sometime earlier in your code
 ...
 $('#optionExample').timepicker('option', 'minTime', '2:00am');
 $('#optionExample').timepicker('option', { 'minTime': '4:00am', 'timeFormat': 'H:i' });

remove
取消绑定现有时间选择器元素。
```
 $('#removeExample').timepicker('remove');
```

setTime
使用JavaScript Date对象设置时间。

 $('#setTimeExample').timepicker('setTime', new Date());

show
显示时间选择器的下拉菜单。
```
 $('#showExample').timepicker('show');
```

事件

change
原生onChange事件会在输入值更新时触发，无论是由时间选择器列表选择还是手动输入到文本输入中。您的代码应在初始化时间选择器后绑定到change，或使用事件委托。
changeTime
在输入或选择有效时间值后调用。有关错误事件，请参阅timeFormatError和timeRangeError。在change事件之前触发。
hideTimepicker
在时间选择器关闭后调用。
selectTime
在从时间选择器列表中选择时间值后调用。在change事件之前触发。
showTimepicker
在时间选择器显示后调用。
timeFormatError
如果在时间选择器输入中手动输入不可解析的时间字符串时调用。在change事件之前触发。
timeRangeError
如果设置了maxTime和minTime或disableTimeRanges，并且在时间选择器输入中手动输入无效时间时调用。在change事件之前触发。

当使用useSelect选项时，selectTime和hideTimepicker事件触发方式略有不同。有关更多信息，请参阅#427。

主题化

带有类名的示例标记

<input value="5:00pm" class="ui-timepicker-input" type="text">
...
<div class="ui-timepicker-wrapper ui-timepicker-positioned-top optional-custom-classname" tabindex="-1">
	<ul class="ui-timepicker-list">
		<li class="ui-timepicker-am">12:00am</li>
		<li class="ui-timepicker-am">12:30am</li>
		...
		<li class="ui-timepicker-pm">4:30pm</li>
		<li class="ui-timepicker-pm ui-timepicker-selected">5:00pm</li>
		<li class="ui-timepicker-pm ui-timepicker-disabled">5:30pm</li>
		<li class="ui-timepicker-pm">6:00pm <span class="ui-timepicker-duration">(1 hour)</span></li>
		<li class="ui-timepicker-pm">6:30pm</li>
		...
		<li class="ui-timepicker-pm">11:30pm</li>
	</ul>
</div>

当下拉菜单位于输入上方时，将应用ui-timepicker-positioned-top类。

打包

NPM npm install --save timepicker

CDN https://cdn.jsdelivr.net.cn/npm/timepicker/

在https://github.com/Recras/angular-jquery-timepicker处可用AngularJS指令。

帮助

提交一个GitHub 问题请求。请尝试提供演示问题的代码；您可以从这个 jsFiddle开始。

开发指南

克隆后，使用 npm install 安装开发依赖。

npm run build：编译时间选择器并将更新后的输出放置在项目根目录
npm run watch：每当源文件之一更改时，重新构建
npm run format：应用代码格式化规则
npm run test：运行 jest 测试套件

jquery-timepicker 遵循语义化版本控制。

jonthornton / jquery-timepicker

维护者

详情

README

要求

用法

选项

方法

事件

主题化

打包

帮助

开发指南