## TimePicker 時間選擇器
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
#### [在線預覽](https://jsrun.net/GehKp/edit)
#### 舉例:
```js
{
type: "TimePicker",
field: "section_time",
title: "活動時間",
value: [],
props: {
"type": "timerange",
"placeholder":"請選擇獲得時間",
},
}
```
#### maker快速生成:
```js
$formCreate.maker.time('活動時間','section_time').props({
"type":"timerange",
"placeholder":"請選擇活動時間"
})
```
#### json 生成規則
```json
{
type: "TimePicker",//必填!
field: "section_time",//必填!
title: "活動時間",//必填!
//input值, type為timerange value為數組 [start_value,end_value]
value: [],
props: {
//顯示類型，可選值為 time、timerange
"type": "timerange", //必填!
//展示的時間格式
"format": "HH:mm:ss",
//下拉列表的時間間隔，數組的三項分別對應小時、分鐘、秒。例如設置為 [1, 15] 時，分鐘會顯示：00、15、30、45。
"steps": [],
//時間選擇器出現的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placement": "bottom-start",
//占位文本
"placeholder":"請選擇活動時間",
//是否顯示底部控制欄，開啟后，選擇完日期，選擇器不會主動關閉，需用戶確認后才可關閉
"confirm":false,
//尺寸，可選值為large、small、default或者不設置
"size":"default",
//是否禁用選擇器
"disabled":false,
//是否顯示清除按鈕
"clearable":true,
//完全只讀，開啟后不會彈出選擇器
"readonly":false,
//文本框是否可以輸入
"editable":false,
},
validate:[],
}
```
#### 參數說明
##### 基本規則 rule:
| **字段名** | **說明** | **字段類型** | **是否必填** | **默認值** |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | 字段值,當props.type設置為timerange時value為數組 \[開始時間,結束時間\] | String,Number,Date,Array | false | - |
| props | 元素配置 | Object | true | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 顯示類型，可選值為 time、timerange | String | true | - |
| format | 展示的時間格式,例如 'HH:mm:ss' | String | false | 'HH:mm:ss' |
| steps | 下拉列表的時間間隔，數組的三項分別對應小時、分鐘、秒。例如設置為 \[1, 15\] 時，分鐘會顯示：00、15、30、45。 | Number | false | - |
| placement | 時間選擇器出現的位置，可選值為top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end | String | false | - |
| placeholder | 占位文本 | String | false | - |
| confirm | 是否顯示底部控制欄，開啟后，選擇完日期，選擇器不會主動關閉，需用戶確認后才可關閉 | Boolean | false | false |
| size | 尺寸，可選值為large、small、default或者不設置 | String | false | - |
| disabled | 是否禁用選擇器 | Boolean | false | false |
| clearable | 是否顯示清除按鈕 | Boolean | false | true |
| readonly | 完全只讀，開啟后不會彈出選擇器 | Boolean | false | false |
| editable | 文本框是否可以輸入 | Boolean | false | false |
##### 事件擴展 event:
| 事件名稱 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| change | 時間發生變化時觸發 已經格式化后的時間，比如 09:41:00 | Function | false | - |
| open-change | 彈出浮層和關閉浮層時觸發 true 或 false | Function | false | - |
| clear | 在清空日期時觸發 | Function | false | - |
---
