element-plus的DateTimePicker 日期时间选择器

总结图

Element Plus 的 DateTimePicker 组件可同时选择日期和时间，通过设置type为datetime或datetimerange实现单值或范围选择。支持通过format和value-format分别控制输入框显示格式和绑定值格式，默认接收和输出Date对象。属性包括model-value、disabled、format等，事件有change、blur等，还可通过插槽自定义图标，适用于需要日期时间选择的场景。

详细总结

一、组件功能概述

1. 核心功能

   • 支持单日期时间选择（type="datetime"）和日期时间范围选择（type="datetimerange"）。
   • 范围选择时默认时间为00:00:00，可通过default-time属性自定义起始和结束时间（如[new Date('12:00:00'), new Date('08:00:00')]）。

2. 格式控制

   • format：控制输入框显示格式，默认YYYY-MM-DD HH:mm:ss。
   • value-format：控制绑定值格式，默认输出Date对象，也可转为时间戳或字符串。
   • date-format/time-format（2.4.0+）：控制下拉面板中日期和时间的显示格式。

二、关键属性

属性名	说明	类型	默认值
model-value	绑定值，范围选择时为长度 2 的数组	number/string/object	—
type	选择器类型，datetime或datetimerange	enum	date
format	输入框显示格式（参考 Day.js 格式）	string	YYYY-MM-DD HH:mm:ss
value-format	绑定值格式，未指定时为Date对象	string	—
default-time	选择日期后的默认时间，范围选择时数组长度为 2	object	—
disabled	是否禁用组件	boolean	false
clearable	是否显示清除按钮	boolean	true
shortcuts	快捷选择选项数组	object[]	—
disabled-date	禁用日期的判断函数，参数为日期，返回boolean	Function	—

三、事件与方法

1. 事件

   • change：确认选择值时触发，参数为绑定值。
   • clear（2.7.7+）：点击清除按钮时触发。
   • calendar-change：范围选择时日历日期变化触发，参数为[startDate, endDate]。

2. 方法

   • focus()：聚焦组件。
   • blur()（2.8.7+）：组件失焦。

四、插槽与自定义

• 插槽
  • range-separator：自定义范围分隔符（默认'-'）。
  • 图标插槽（2.8.0+）：prev-month、next-month、prev-year、next-year。
• 自定义图标
  • 通过prefix-icon和clear-icon属性自定义前缀和清除图标。

五、浏览器支持与版本说明

• 支持现代浏览器，IE 需额外适配。
• 版本特性：如 2.4.0 新增date-format/time-format，2.8.0 支持自定义图标插槽。

---

关键问题

1. 如何实现日期时间范围选择？
   答案：设置type="datetimerange"，绑定值为长度 2 的数组（如[startDate, endDate]），范围分隔符可通过range-separator属性或range-separator插槽自定义。

2. 如何修改输入框显示格式和绑定值格式？
   答案：format属性控制输入框显示格式（如format="YYYY年MM月DD日 HH:mm"），value-format属性控制绑定值格式（如value-format="x"转为时间戳），默认绑定值为Date对象。

3. 如何禁用特定日期？
   答案：通过disabled-date属性传入函数，函数参数为日期对象，返回true时禁用该日期。例如：

   js

   disabled-date(time) {
     return time.getTime() < Date.now() - 24 * 60 * 60 * 1000; // 禁用昨天及之前的日期
   }