时间选择器
轻松创建可以从预填充下拉菜单中选择时间的时间选择器。
用法
将 data-uk-timepicker
属性添加到 <input>
元素中就能创建时间选择器。获得焦点后,时间选择器会自动显示预填充的下拉菜单,可以通过键盘上的上下按钮或滚动鼠标进行浏览。注意 使用此组件需要额外添加 timepicker.js
文件,在js/components
文件夹中。
重要 时间选择器组件需要自动完成组件才能生效。请确保已经将两者引入页面。
Example
Markup
<form class="uk-form">
<input type="text" data-uk-timepicker>
</form>
显示子午线时间
添加format选项并设置为12h
即可显示子午线时间。
Example
Markup
<form class="uk-form">
<input type="text" data-uk-timepicker="{format:'12h'}">
</form>
JavaScript 选项
这是如果通过属性设置选项的例子:
data-uk-timepicker="{format:'12h'}"
选项 | 可用值 | 默认值 | 描述 |
---|---|---|---|
format |
'24h' or '12h' | '24h' | 定义时间表示法 |
start |
Integer between 0 and 24 | 0 | 起始时间 |
end |
Integer between 0 and 24 | 24 | 终止时间 |
手动初始化元素
var timepicker = UIkit.timepicker(element, { /* options */ });