1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html表单日期选择器ppt DatePicker 日期选择框

html表单日期选择器ppt DatePicker 日期选择框

时间:2021-10-27 18:18:42

相关推荐

html表单日期选择器ppt DatePicker 日期选择框

## DatePicker 日期选择器

### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top)

#### [在线预览](/HehKp/edit)

#### 举例:

```js

{

type: "DatePicker",

field: "section_day",

title: "活动日期",

value: ['-02-20', new Date()],

props: {

"type": "datetimerange",

"format": "yyyy-MM-dd HH:mm:ss",

"placeholder":"请选择活动日期",

}

}

```

#### maker快速生成:

```js

$formCreate.maker.date('活动日期','section_day',['-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: ['-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 | 日期发生变化时触发,已经格式化后的日期,比如 -02-20 | Function | false | - |

| open-change | 弹出日历和关闭日历时触发 true 或 false | Function | false | - |

| clear | 在 confirm 模式或 clearable = true 时有效,在清空日期时触发 | Function | false\` | - |

---

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。