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 |
size | 输入框尺寸 | enum | — |
editable | 文本框可输入 | boolean | true |
clearable | 是否显示清除按钮 | boolean | true |
placeholder | 非范围选择时的占位内容 | string | '' |
startPlaceholder | 范围选择时开始日期的占位内容 | string | — |
endPlaceholder | 范围选择时结束日期的占位内容 | string | — |
type | 显示类型 | enum | date |
format | 显示在输入框中的格式 | 参见 date formats | YYYY-MM-DD |
popperClass | DatePicker 下拉框的类名 | string | — |
popperOptions | 自定义 popper 选项,更多请参考 popper.js | object | {} |
rangeSeparator | 选择范围时的分隔符 | string | '-' |
defaultValue | 可选,选择器打开时默认显示的时间 | object | — |
defaultTime | 范围选择时选中日期所使用的当日内具体时刻 | object | — |
valueFormat | 可选,绑定值的格式。 不指定则绑定值为 Date 对象 | 参见 date formats | — |
id | 等价于原生 input id 属性 | string / object | — |
name | 等价于原生 input name 属性 | string / object | '' |
unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | false |
prefixIcon | 自定义前缀图标 如果 type 的值是TimeLikeType ,那么就是 Clock ,不然就是 Calendar | string / object | '' |
clearIcon | 自定义清除图标 | string / object | CircleClose |
validateEvent | 是否触发表单验证 | boolean | true |
disabledDate | 一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function | — |
shortcuts | 设置快捷选项,需要传入数组对象 | object | [] |
cellClassName | 设置自定义类名 | Function | — |
teleported | 是否将 date-picker 的下拉列表插入至 body 元素 | boolean | true |
emptyValues | 组件的空值配置 参考config-provider | array | — |
valueOnClear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — |
fallbackPlacements | Tooltip 可用的 positions 请查看popper.js 文档 | arrary | — |
placement | 下拉框出现的位置 | Placement | bottom |
Events
事件名 | 说明 | 类型 |
---|---|---|
change | 用户确认选定的值时触发 | Function |
blur | 在组件 Input 失去焦点时触发 | Function |
focus | 在组件 Input 获得焦点时触发 | Function |
clear | 可清空的模式下用户点击清空按钮时触发 | Function |
calendar-change | 在日历所选日期更改时触发 | Function |
panel-change | 当日期面板改变时触发。 | Function |
visible-change | 当 DatePicker 的下拉列表出现/消失时触发 | Function |
Slots
名称 | 说明 |
---|---|
default | 自定义单元格内容 |
range-separator | 自定义范围分割符内容 |
prev-month | 上个月的图标 |
next-month | 下个月的图标 |
prev-year | 上一年图标 |
next-year | 下一年图标 |
DateTimePicker (props.type:'datetime')
Props
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
readonly | 只读 | boolean | false |
disabled | 禁用 | boolean | false |
editable | 文本框可输入 | boolean | true |
clearable | 是否显示清除按钮 | boolean | true |
size | 输入框尺寸 | enum | default |
placeholder | 非范围选择时的占位内容 | string | — |
startPlaceholder | 范围选择时开始日期的占位内容 | string | — |
endElaceholder | 范围选择时结束日期的占位内容 | string | — |
arrowControl | 是否使用箭头进行时间选择 | boolean | false |
type | 显示类型 | enum | date |
format | 显示在输入框中的格式 | string see date formats | YYYY-MM-DD HH:mm:ss |
popperClass | DateTimePicker 下拉框的类名 | string | — |
rangeSeparator | 选择范围时的分隔符 | string | '-' |
defaultValue | 可选,选择器打开时默认显示的时间 | object | — |
defaultTime | 选择日期后的默认时间值。 如未指定则默认时间值为 00:00:00 | object | — |
valueFormat | 可选,绑定值的格式。 不指定则绑定值为 Date 对象 | string see date formats | — |
dateFormat | 可选,时间选择器下拉列表中显示的日期格式 | string see date formats | — |
timeFormat | 可选,时间选择器下拉列表中显示的时间格式 | string see date formats | — |
id | 等价于原生 input id 属性 | string / object | — |
name | 等价于原生 input name 属性 | string | — |
unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | false |
prefixIcon | 自定义前缀图标组件 | string / Component | Date |
clearIcon | 自定义清除图标 | string / Component | CircleClose |
shortcuts | 设置快捷选项,需要传入数组对象 | object | — |
disabledDate | 一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function | — |
cellClassName | 设置自定义类名 | Function | — |
teleported | 是否将 datetime-picker 的下拉列表插入至 body 元素 | boolean | true |
emptyValues | 组件的空值配置 参考config-provider | array | — |
valueOnClear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — |
showNow | 是否显示 now 按钮 | boolean | true |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 用户确认选定的值时触发 | value |
blur | 在组件 Input 失去焦点时触发 | (e: FocusEvent) |
focus | 在组件 Input 获得焦点时触发 | (e: FocusEvent) |
clear | 可清空的模式下用户点击清空按钮时触发 | Function |
calendar-change | 如果用户没有选择日期,那默认展示当前日的月份。 选中日历日期后会执行的回调,只有当 datetimerange 才生效 | [Date, Date] |
visible-change | 当 DateTimePicker 的下拉列表出现/消失时触发 | 出现时为true,隐藏时为false |
Slots
插槽名 | 说明 |
---|---|
default | 自定义单元格内容 |
range-separator | 自定义范围分割符内容 |
prev-month | 上个月的图标 |
next-month | 下个月的图标 |
prev-year | 上一年图标 |
next-year | 下一年图标 |