根据element-plus DateTimePicker封装的shortcuts快捷选项

1. 组件封装类

// 组件名称命名为 getDate.ts

function getTimeRange(rangeType: any) {
  const start = new Date()
  const end = new Date()

  switch (rangeType) {
    // 今日
    case 'today':
      start.setHours(0, 0, 0, 0)
      end.setHours(23, 59, 59, 999)
      break
      // 昨日
    case 'yesterday':
      start.setDate(start.getDate() - 1)
      start.setHours(0, 0, 0, 0)
      end.setDate(end.getDate() - 1)
      end.setHours(23, 59, 59, 999)
      break
    // 最近七天
    case 'last7days':
      start.setDate(start.getDate() - 6)
      start.setHours(0, 0, 0, 0)
      end.setHours(23, 59, 59, 999)
      break
    // 这个月
    case 'currentMonth':
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      end.setMonth(end.getMonth() + 1)
      end.setDate(0)
      end.setHours(23, 59, 59, 999)
      break
    // 上个月
    case 'lastMonth':
      start.setMonth(start.getMonth() - 1)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      end.setDate(0)
      end.setHours(23, 59, 59, 999)
      break
    // 最近3个月
    case 'before3Month':
      start.setMonth(start.getMonth() - 2)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      end.setMonth(end.getMonth() + 1)
      end.setDate(0)
      end.setHours(23, 59, 59, 999)
      break
    default:
      console.error('Invalid range type')
      return
  }
  return [start, end]
}
export {
  getTimeRange,
}

2. 使用方法

<script lang="ts" setup>
import { getTimeRange } from '@/utils/getDate'
const shortcuts = [{
  text: '今日',
  value: () => getTimeRange('today'),
}, {
  text: '昨日',
  value: () => getTimeRange('yesterday'),
}, {
  text: '最近七日',
  value: () => getTimeRange('last7days'),
}, {
  text: '这个月',
  value: () => getTimeRange('currentMonth'),
}, {
  text: '上个月',
  value: () => getTimeRange('lastMonth'),
}, {
  text: '近3个月',
  value: () => getTimeRange('before3Month'),
}]
</script>


<template>
<el-date-picker
  v-model="data.search.times"
  type="datetimerange"
  range-separator="-"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
  :clearable="false"
  :shortcuts="shortcuts"
/>
</template>