时间选择器分两种类型,一种是picker类型,可选择任意时间点;另一种是select类型,只能选择指定的时间点。
具体的区分请看下面的示例。
## 方法原型:
```
addTime($name = '', $title = '', $tips = '', $default = null, $attr = [])
```
## 参数说明:
```
* @param string $name 字段名
* @param string $title 字段标题
* @param string $tips 提示文字
* @param string $default 默认值
* @param array $attr 组件属性 {
* start:起始时间,
* end:结束时间,
* step:步长,
* min:最小时间,
* max:最大时间,
* selectable_range:可选时间段,例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'],
* is_range:是否是时间范围选择
* }
```
> TODO:由于ElementUI的bug,非范围选择时,设置可选时间段会报错,所以非范围选择暂时不支持可选时间段
> 在attr参数中,start、end、step、min、max为select类型的参数,用于指定可以选择的时间。selectable_range为picker类型的参数,用于指定可选择的时间范围。
## 调用方式
- 添加一个时间选择器
```
return SBuilder::make('form')
->addTime('time', '时间')
->fetch();
```
> 页面效果:
![](https://box.kancloud.cn/d8ef805b52dbb4a1e7f0be36a89b159c_309x304.png)
~~- 设置可选的时间范围~~
> 由于ElementUI的bug,非范围选择时,设置可选时间段会报错,所以非范围选择暂时不支持可选时间段
> ```
> return SBuilder::make('form')
> ->addTime('time', '时间', '', '', [
> 'selectable_range' => '18:30:00 - 20:30:00'
> ])
> ->fetch();
> ```
- 添加一个select类型的时间选择器。(要添加一个select选择器,start与end必须指定,其他参数可以为空)
```
return SBuilder::make('form')
->addTime('time_select', '时间select', '', null, [
'start' => '06:00',
'end' => '18:00',
'step' => '00:10',
'min' => '08:00',
'max' => '18:00',
])
->fetch();
```
> 页面效果:
![](https://box.kancloud.cn/3dd6f1b775570260b245a20c080680e6_356x266.png)