时间选择器
最后更新于:2022-04-01 22:23:54
# 时间选择器
轻松创建可以从预填充下拉菜单中选择时间的时间选择器。
## 用法
将 `data-uk-timepicker` 属性添加到 `<input>` 元素中就能创建时间选择器。获得焦点后,时间选择器会自动显示预填充的下拉菜单,可以通过键盘上的上下按钮或滚动鼠标进行浏览。注意 使用此组件需要额外添加 `timepicker.js` 文件,在`js/components`文件夹中。
重要 时间选择器组件需要[自动完成组件](autocomplete.html)才能生效。请确保已经将两者引入页面。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f41d1323.jpg)
### Markup
```
```
* * *
## 显示子午线时间
添加_format_选项并设置为`12h`即可显示子午线时间。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f41e4598.jpg)
### Markup
```
```
* * *
## 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 */ });
```
';