## DatePicker 日期選擇器
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
#### [在線預覽](https://jsrun.net/HehKp/edit)
#### 舉例:
```js
{
type: "DatePicker",
field: "section_day",
title: "活動日期",
value: ['2018-02-20', new Date()],
props: {
"type": "datetimerange",
"format": "yyyy-MM-dd HH:mm:ss",
"placeholder":"請選擇活動日期",
}
}
```
#### maker快速生成:
```js
$formCreate.maker.date('活動日期','section_day',['2018-02-20', new Date()]).props({
"type": "datetimerange",
"placeholder":"請選擇活動日期"
})
```
#### json 生成規則
```json
{
type: "DatePicker",//必填!
field: "section_day",//必填!
title: "活動日期",//必填!
//input值, type為daterange,datetimerange value為數組 [start_value,end_value]
value: ['2018-02-20', new Date()],
props: {
//顯示類型，可選值為 date、daterange、datetime、datetimerange、year、month
"type": "datetimerange",//必填!
//展示的日期格式
"format": "yyyy-MM-dd HH:mm:ss",
//日期選擇器出現的位置，可選值為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設置為daterange,datetimerange時value為數組 \[開始日期,結束日期\] | String,Number,Date,Array | false | - |
| props | 元素配置 | Object | true | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 顯示類型，可選值為 date、daterange、datetime、datetimerange、year、month | String | true | - |
| format | 展示的日期格式,例如:yyyy-MM-dd HH:mm:ss | String | false | 'yyyy-MM-dd HH:mm:ss' |
| 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 | - |
| clearable | 是否顯示清除按鈕 | Boolean | false | true |
| disabled | 是否禁用選擇器 | Boolean | false | false |
| readonly | 完全只讀，開啟后不會彈出選擇器 | Boolean | false | false |
| editable | 文本框是否可以輸入 | Boolean | false | false |
##### 事件擴展 event:
| 事件名稱 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| change | 日期發生變化時觸發,已經格式化后的日期，比如 2018-02-20 | Function | false | - |
| open-change | 彈出日歷和關閉日歷時觸發 true 或 false | Function | false | - |
| clear | 在 confirm 模式或 clearable = true 時有效，在清空日期時觸發 | Function | false\` | - |
---
