DatePicker 日期选择器
规则
js
{
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: ['2018-02-20', '2021-02-15'],
props: {
type: "datetimerange",
format: "YYYY-MM-dd HH:mm:ss",
placeholder:"请选择活动日期",
}
}参考:Element_DatePicker,Element_DateTimePicker
value: String | Array
DatePicker
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| readonly | 完全只读 | boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| editable | 文本框可输入 | boolean | — | true |
| clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | large, small, mini | — |
| placeholder | 非范围选择时的占位内容 | string | — | — |
| startPlaceholder | 范围选择时开始日期的占位内容 | string | — | — |
| endPlaceholder | 范围选择时结束日期的占位内容 | string | — | — |
| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
| format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd |
| align | 对齐方式 | string | left, center, right | left |
| popperClass | DatePicker 下拉框的类名 | string | — | — |
| pickerOptions | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| rangeSeparator | 选择范围时的分隔符 | string | — | '-' |
| defaultValue | 可选，选择器打开时默认显示的时间 | Date | 可被new Date()解析 | — |
| defaultTime | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00 | — |
| valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
| name | 原生属性 | string | — | — |
| unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
| prefixIcon | 自定义头部图标的类名 | string | — | el-icon-date |
| clearIcon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
| validateEvent | 输入时是否触发表单的校验 | boolean | - | true |
Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 | Function({ maxDate, minDate }) | — | — |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 value-format控制 |
| blur | 当 input 失去焦点时触发 | 组件实例 |
| focus | 当 input 获得焦点时触发 | 组件实例 |
DateTimePicker (props.type:'datetime')
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| readonly | 完全只读 | boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| editable | 文本框可输入 | boolean | — | true |
| clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | large, small, mini | — |
| placeholder | 非范围选择时的占位内容 | string | — | — |
| startPlaceholder | 范围选择时开始日期的占位内容 | string | — | — |
| endPlaceholder | 范围选择时结束日期的占位内容 | string | — | — |
| timeArrowControl | 是否使用箭头进行时间选择 | boolean | — | false |
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
| format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd |
| align | 对齐方式 | string | left, center, right | left |
| popperClass | DateTimePicker 下拉框的类名 | string | — | — |
| pickerOptions | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| rangeSeparator | 选择范围时的分隔符 | string | - | '-' |
| defaultValue | 可选，选择器打开时默认显示的时间 | Date | 可被new Date()解析 | — |
| defaultTime | 选中日期后的默认具体时刻 | 非范围选择时：string / 范围选择时：string[] | 非范围选择时：形如12:00:00的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 00:00:00 | — |
| valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
| name | 原生属性 | string | — | — |
| unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
| prefixIcon | 自定义头部图标的类名 | string | — | el-icon-date |
| clearIcon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 value-format 控制 |
| blur | 当 input 失去焦点时触发 | 组件实例 |
| focus | 当 input 获得焦点时触发 | 组件实例 |