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

引言在后台管理系统或数据报表页面中日期范围筛选是非常常见的需求。为了提升用户体验通常会在日期选择器弹窗中提供类似「最近一周」「最近一个月」「本月」等快捷选项让用户无需手动逐一点击日历上的日期。element-plus 的 DatePicker 组件提供了shortcuts属性来轻松实现这一功能。本文将详细介绍如何在日期选择弹窗中添加日期范围快捷选项。1. 基础用法单日期选择器快捷选项如果你使用的是单个日期选择器而非日期范围快捷选项的配置相对简单。通过shortcuts属性传入一个快捷选项对象数组即可每个选项包含text和value两个字段。template el-date-picker v-modeldate typedate placeholder选择日期 :shortcutsshortcuts / /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. 日期范围选择器快捷选项对于日期范围选择器typedaterange快捷选项需要返回一个包含两个日期的数组[startDate, endDate]。这是实际开发中最常见的场景。template el-date-picker v-modeldateRange typedaterange range-separator至 start-placeholder开始日期 end-placeholder结束日期 :shortcutsshortcuts / /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] }, }, ] /script3. 完整示例包含更多常用快捷选项下面是一个更完整的配置覆盖了「今天」「昨天」「本月」「本年」等常用时间范围适用于报表或数据列表筛选。template el-date-picker v-modeldateRange typedaterange range-separator至 start-placeholder开始日期 end-placeholder结束日期 :shortcutsdateShortcuts / /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-DDshortcuts中返回的应为对应格式的字符串而非 Date 对象。总结通过 element-plus DatePicker 的shortcuts属性可以很方便地在日期选择弹窗中添加快捷选项显著提升用户操作效率。无论是单日期选择还是日期范围选择只需要配置对应的函数来动态返回日期值即可。在实际项目中你可以根据业务需求灵活组合「今天」「本周」「本月」「自定义范围」等选项打造友好的筛选体验。