# 时间选择器 轻松创建可以从预填充下拉菜单中选择时间的时间选择器。 ## 用法 将 `data-uk-timepicker` 属性添加到 `&lt;input&gt;` 元素中就能创建时间选择器。获得焦点后，时间选择器会自动显示预填充的下拉菜单，可以通过键盘上的上下按钮或滚动鼠标进行浏览。注意 使用此组件需要额外添加 `timepicker.js` 文件，在`js/components`文件夹中。 重要 时间选择器组件需要[自动完成组件](autocomplete.html)才能生效。请确保已经将两者引入页面。 ### 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 */ }); ```