element-plus的DatePicker组件，实现在日期选择弹窗里加日期范围快捷选项

引言

在后台管理系统或数据报表页面中，日期范围筛选是非常常见的需求。为了提升用户体验，通常会在日期选择器弹窗中提供类似「最近一周」「最近一个月」「本月」等快捷选项，让用户无需手动逐一点击日历上的日期。element-plus 的 DatePicker 组件提供了shortcuts属性来轻松实现这一功能。本文将详细介绍如何在日期选择弹窗中添加日期范围快捷选项。

1. 基础用法：单日期选择器快捷选项

如果你使用的是单个日期选择器（而非日期范围），快捷选项的配置相对简单。通过shortcuts属性传入一个快捷选项对象数组即可，每个选项包含text和value两个字段。

<template> <el-date-picker v-model="date" type="date" placeholder="选择日期" :shortcuts="shortcuts" /> </template> <script setup> import { ref } from 'vue' const date = ref('') const shortcuts = [ { text: '今天', value: new Date(), }, { text: '昨天', value: () => { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24) return date }, }, { text: '一周前', value: () => { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) return date }, }, ] </script>

这里value可以是一个固定日期，也可以是一个函数，element-plus 会在用户点击快捷选项时自动调用该函数来获取日期值。

2. 日期范围选择器快捷选项

对于日期范围选择器（type="daterange"），快捷选项需要返回一个包含两个日期的数组[startDate, endDate]。这是实际开发中最常见的场景。

<template> <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" /> </template> <script setup> import { ref } from 'vue' const dateRange = ref([]) const 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] }, }, { text: '最近三个月', value: () => { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) return [start, end] }, }, ] </script>

3. 完整示例：包含更多常用快捷选项

下面是一个更完整的配置，覆盖了「今天」「昨天」「本月」「本年」等常用时间范围，适用于报表或数据列表筛选。

<template> <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="dateShortcuts" /> </template> <script setup> import { ref } from 'vue' const dateRange = ref([]) const dateShortcuts = [ { text: '今天', value: () => { const today = new Date() return [today, today] }, }, { text: '昨天', value: () => { const end = new Date() const start = new Date() end.setTime(end.getTime() - 3600 * 1000 * 24) start.setTime(start.getTime() - 3600 * 1000 * 24) return [start, end] }, }, { text: '本周', value: () => { const now = new Date() const dayOfWeek = now.getDay() || 7 const start = new Date() start.setTime(now.getTime() - 3600 * 1000 * 24 * (dayOfWeek - 1)) start.setHours(0, 0, 0, 0) const end = new Date() end.setHours(23, 59, 59, 999) return [start, end] }, }, { text: '本月', value: () => { const now = new Date() const start = new Date(now.getFullYear(), now.getMonth(), 1) const end = new Date() return [start, end] }, }, { text: '上个月', value: () => { const now = new Date() const start = new Date(now.getFullYear(), now.getMonth() - 1, 1) const end = new Date(now.getFullYear(), now.getMonth(), 0) return [start, end] }, }, { text: '本年', value: () => { const now = new Date() const start = new Date(now.getFullYear(), 0, 1) const end = new Date() return [start, end] }, }, { 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] }, }, { text: '最近三个月', value: () => { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) return [start, end] }, }, ] </script>

在上述代码中，每个快捷选项都通过一个函数动态计算日期范围，确保每次点击时获取的都是最新时间。

4. 使用 onClick 实现更灵活的控制

除了value属性外，element-plus DatePicker 的快捷选项还支持onClick回调，它接收shortcut对象作为参数。这种方式在需要根据快捷选项执行额外逻辑（例如同时获取筛选后的数据）时非常有用。

const shortcutsWithOnClick = [ { text: '最近一周', value: () => { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) return [start, end] }, onClick: (shortcut) => { console.log('选中了快捷选项：', shortcut.text) // 这里可以执行额外逻辑，如重新请求数据 }, }, ]

通过onClick，你可以在用户点击快捷选项时触发数据刷新、日志记录等操作，而不需要再额外监听v-model的变化。

5. 注意事项与最佳实践

• value 函数必须返回新对象：如果快捷选项的value是固定值，建议也写成函数形式，避免因对象引用问题导致日期不更新。
• 时区处理：上述示例使用本地时间，如果你的项目涉及多时区，建议使用dayjs或date-fns等日期库进行统一处理。
• 与disabledDate配合：如果设置了disabledDate，快捷选项返回的日期可能会被禁用，导致选择失败，请确保快捷选项范围内的日期均未被禁用。
• value-format 的影响：如果你为 DatePicker 设置了value-format（如"YYYY-MM-DD"），shortcuts中返回的应为对应格式的字符串，而非 Date 对象。

总结

通过 element-plus DatePicker 的shortcuts属性，可以很方便地在日期选择弹窗中添加快捷选项，显著提升用户操作效率。无论是单日期选择还是日期范围选择，只需要配置对应的函数来动态返回日期值即可。在实际项目中，你可以根据业务需求灵活组合「今天」「本周」「本月」「自定义范围」等选项，打造友好的筛选体验。