时间选择器

轻松创建可以从预填充下拉菜单中选择时间的时间选择器。

用法

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 */ });