DatePicker 日期选择器
规则
基础示例
js
const rule = {
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: ['2018-02-20', '2021-02-15'],
props: {
type: "datetimerange",
format: "YYYY-MM-dd HH:mm:ss",
placeholder:"请选择活动日期",
}
}Props 配置示例
日期选择
js
const rule = {
type: "DatePicker",
field: "date",
title: "活动日期",
value: "2024-01-01",
props: {
type: "date",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
placeholder: "请选择日期",
clearable: true,
}
}日期时间选择
js
const rule = {
type: "DatePicker",
field: "datetime",
title: "活动时间",
value: "2024-01-01 12:00:00",
props: {
type: "datetime",
format: "YYYY-MM-DD HH:mm:ss",
valueFormat: "YYYY-MM-DD HH:mm:ss",
placeholder: "请选择日期时间",
}
}日期范围选择
js
const rule = {
type: "DatePicker",
field: "dateRange",
title: "活动期间",
value: ["2024-01-01", "2024-01-31"],
props: {
type: "daterange",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
startPlaceholder: "开始日期",
endPlaceholder: "结束日期",
}
}限制日期范围
js
const rule = {
type: "DatePicker",
field: "date",
title: "预约日期",
value: "",
props: {
type: "date",
format: "YYYY-MM-DD",
disabledDate: (time) => {
// 禁用今天之前的日期
return time.getTime() < Date.now() - 8.64e7;
},
placeholder: "请选择日期",
}
}快捷选项
js
const rule = {
type: "DatePicker",
field: "dateRange",
title: "查询日期",
value: [],
props: {
type: "daterange",
format: "YYYY-MM-DD",
shortcuts: [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
],
}
}Events 事件示例
监听日期变化
js
const rule = {
type: "DatePicker",
field: "date",
title: "活动日期",
value: "",
props: {
type: "date",
format: "YYYY-MM-DD",
placeholder: "请选择日期",
},
on: {
change: (value) => {
console.log('日期改变:', value);
},
blur: (event) => {
console.log('失去焦点:', event);
},
focus: (event) => {
console.log('获得焦点:', event);
},
clear: () => {
console.log('清空日期');
},
'visible-change': (visible) => {
console.log('下拉框显示状态:', visible);
},
},
}完整配置项: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 | 下一年图标 |