介绍一下el-date-picker组件的用法

<think>我们正在介绍Element UI（或Element Plus）中的el-date-picker组件，这是一个日期选择器组件。 主要功能：选择日期、日期范围、时间等。 用法包括：绑定数据、设置日期格式、选择器类型、快捷选项、禁用日期等。 注意：在Vue2和Vue3（Element Plus）中用法可能略有不同，但核心相同。 我们将给出基本用法示例，然后介绍一些常用属性。 最后按照要求提出3-5个相关问题。</think>`el-date-picker` 是 Element UI 提供的日期选择器组件，用于实现日期/时间的选择功能。以下是核心用法详解： ### 1. **基础用法** ```vue <template> <!-- 选择单个日期 --> <el-date-picker v-model="date1" type="date" placeholder="选择日期" /> <!-- 选择日期范围 --> <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> </template> <script> export default { data() { return { date1: '', // 单个日期 dateRange: [] // 日期范围 [开始日期, 结束日期] } } } </script> ``` ### 2. **常用属性配置** | 属性 | 说明 | 示例 | |------|------|------| | `type` | 选择器类型 | `date/datetime/week/month/year/daterange` | | `format` | 显示格式 | `format="yyyy-MM-dd"` | | `value-format` | 绑定值格式 | `value-format="timestamp"` | | `disabled-date` | 禁用日期 | `:disabled-date="disabledDateFn"` | | `shortcuts` | 快捷选项 | 见下方代码 | ```vue <el-date-picker v-model="date" type="date" format="yyyy年MM月dd日" value-format="timestamp" :disabled-date="disabledDate" :shortcuts="shortcuts" /> <script> export default { data() { return { shortcuts: [{ text: '今天', value: new Date() }, { text: '一周前', value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; } }] } }, methods: { // 禁用今天之前的日期 disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; // 86400000ms=1天 } } } </script> ``` ### 3. **日期时间选择** ```vue <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" :default-time="['12:00:00', '08:00:00']" // 范围选择时分别设置开始/结束时间 /> ``` ### 4. **特殊类型选择** ```vue <!-- 选择周 --> <el-date-picker v-model="week" type="week" format="yyyy 第 WW 周" /> <!-- 选择月份范围 --> <el-date-picker v-model="monthRange" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" /> ``` ### 5. **事件处理** ```vue <el-date-picker @change="handleChange" // 用户确认选择时触发 @focus="handleFocus" // 获得焦点时触发 @blur="handleBlur" // 失去焦点时触发 /> ``` ### 注意事项 1. **日期格式**：推荐使用 `value-format` 统一绑定值格式（如 `'yyyy-MM-dd'`） 2. **时区问题**：默认使用本地时区，可通过 `value-format="timestamp"` 获取时间戳避免时区差异 3. **移动端适配**：在窄屏设备中会自动切换为移动端样式 4. **自定义内容**：使用 `prefix-icon` 和 `clear-icon` 自定义图标