首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-plus的DatePicker组件

element-plus的DatePicker组件实现在日期选择弹窗里加日期范围快捷选项(实例代码)

2026-08-06 10:21:14 作者：yx_back

本文教你用Element Plus DatePicker的shortcuts属性,一键添加最近一周、本月等快捷选项,极大提升后台系统操作效率,从单日选择到日期范围,附完整代码示例,轻松掌握日期快捷筛选的技巧与避坑指南

引言

在后台管理系统或数据报表页面中，日期范围筛选是非常常见的需求。为了提升用户体验，通常会在日期选择器弹窗中提供类似「最近一周」「最近一个月」「本月」等快捷选项，让用户无需手动逐一点击日历上的日期。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 属性，可以很方便地在日期选择弹窗中添加快捷选项，显著提升用户操作效率。无论是单日期选择还是日期范围选择，只需要配置对应的函数想要快速筛选日期范围却不想手动逐日点选？本文教你用Element Plus DatePicker的shortcuts属性,一键添加最近一周、本月等快捷选项,极大提升后台系统操作效率,从单日选择到日期范围,附完整代码示例,轻松掌握日期快捷筛选的技巧与避坑指南来动态返回日期值即可。在实际项目中，你可以根据业务需求灵活组合「今天」「本周」「本月」「自定义范围」等选项，打造友好的筛选体验。

到此这篇关于element-plus的DatePicker组件实现在日期选择弹窗里加日期范围快捷选项(实例代码)的文章就介绍到这了,更多相关element-plus的DatePicker组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！