vue3+element-plus el-date-picker日期、年份筛选设置本周、本月、近3年等快捷筛选

一、页面代码：

<template>

<!-- 日期范围筛选框 -->

<el-date-picker

          v-model="dateRange"

          value-format="YYYY-MM-DD"

          type="daterange"

          range-separator="至"

          start-placeholder="开始日期"

          end-placeholder="结束日期"

          :shortcuts="shortcuts"

          placement="bottom-start"

          :editable="false"

          :disabled-date="disabledDate"

          @change="changeDate"

          class="date-select"

        />

<!-- 年份范围筛选框 -->

<el-date-picker

        v-model="yearRange"

        value-format="YYYY"

        type="yearrange"

        range-separator="至"

        start-placeholder="开始年份"

        end-placeholder="结束年份"

        :shortcuts="shortcuts1"

        placement="bottom-start"

        :editable="false"

        :disabled-date="disabledYear"

        @change="changeYear"

        @clear="changeYear1"

        class="date-select"

        ref="yearPicker"

      />

</template>

<script setup lang="ts">

import common from '@/utils/common'

const startDate = ref<any>() // 开始时间

const endDate = ref<any>() //结束时间

const dateRange = ref<any>([]) // 日期范围值

const yearPicker = ref() // 年份筛选框ref

const yearRange = ref<any>([]) // 年份范围值

// 日期快捷选项

const shortcuts = [

  {

    text: '今日',

    value: () => {

      const end = new Date()

      const start = new Date()

      return [start, end]

    }

  },

  {

    text: '本周',

    value: () => {

      const end = new Date()

      const start = new Date()

      start.setDate(start.getDate() - start.getDay() + 1)

      start.setHours(0, 0, 0, 0) // 将时间设置为当天时间的0点

      return [start, end]

    }

  },

  {

    text: '本月',

    value: () => {

      const end = new Date()

      const start = new Date(end.getFullYear(), end.getMonth(), 1) // 这个月1号

      return [start, end]

    }

  }

]

// 年份快捷选项

const shortcuts1 = [

  {

    text: '今年',

    value: [new Date(), new Date()]

  },

  {

    text: '近3年',

    value: () => {

      const end = new Date()

      const start = new Date(

        new Date().setFullYear(new Date().getFullYear() - 2) // 设置开始时间为当前时间前2年（包含当前年）

      )

      return [start, end]

    }

  },

  {

    text: '近5年',

    value: () => {

      const end = new Date()

      const start = new Date(

        new Date().setFullYear(new Date().getFullYear() - 4) // 设置开始时间为当前时间前4年（包含当前年）

      )

      return [start, end]

    }

  }

]

// 初始化设置默认7天日期

const initTime = () => {

  startDate.value = common.formatDate(

    new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000),

    'yyyy-MM-dd'

  )

  endDate.value = common.formatDate(new Date(), 'yyyy-MM-dd')

  dateRange.value = [startDate.value, endDate.value]

}

// 控制当前日期之后不能选

const disabledDate = (time: any) => {

  return time.getTime() > new Date().getTime()

}

// 改变日期

const changeDate = (value: any) => {

  if (value) {

    dateRange.value = toRaw(value)

    startDate.value = dateRange.value[0]

    endDate.value = dateRange.value[1]

  } else {

    dateRange.value = toRaw(value)

    startDate.value = ''

    endDate.value = ''

  }

}

// 控制指定年份不能选（可选2019年到当前年）

const disabledYear = (time: any) => {

  const year = time.getFullYear()

  return year < 2019 || year > new Date().getFullYear()

}

// 改变年份

const changeYear = (value: any) => {

  if (value) {

    if (yearPicker.value) {

      yearPicker.value.blur()

    }

        yearRange.value = toRaw(value)

  }

}

// 清空时间

const changeYear1 = () => {

  yearRange.value = []

}

onMounted(() => {

        initTime()

}

</script>

<style lang="less" scoped>

:deep(.el-date-editor) {

        width: 240px;

        height: 32px;

        border-radius: 4px;

        font-size: 12px !important;

      }

</style>

二、common文件方法：

formatDate: function (date: any, format: any) {

    let v = ''

    if (typeof date === 'string' || typeof date !== 'object') {

      return

    }

    const year = date.getFullYear()

    const month = date.getMonth() + 1

    const day = date.getDate()

    const hour = date.getHours()

    const minute = date.getMinutes()

    const second = date.getSeconds()

    const weekDay = date.getDay()

    const ms = date.getMilliseconds()

    let weekDayString = ''

    if (weekDay === 1) {

      weekDayString = '星期一'

    } else if (weekDay === 2) {

      weekDayString = '星期二'

    } else if (weekDay === 3) {

      weekDayString = '星期三'

    } else if (weekDay === 4) {

      weekDayString = '星期四'

    } else if (weekDay === 5) {

      weekDayString = '星期五'

    } else if (weekDay === 6) {

      weekDayString = '星期六'

    } else if (weekDay === 0) {

      weekDayString = '星期日'

    }

    v = format

    // Year

    v = v.replace(/yyyy/g, year)

    v = v.replace(/YYYY/g, year)

    v = v.replace(/yy/g, (year + '').substring(2, 4))

    v = v.replace(/YY/g, (year + '').substring(2, 4))

    // Month

    const monthStr = '0' + month

    v = v.replace(/MM/g, monthStr.substring(monthStr.length - 2))

    // Day

    const dayStr = '0' + day

    v = v.replace(/dd/g, dayStr.substring(dayStr.length - 2))

    // hour

    const hourStr = '0' + hour

    v = v.replace(/HH/g, hourStr.substring(hourStr.length - 2))

    v = v.replace(/hh/g, hourStr.substring(hourStr.length - 2))

    // minute

    const minuteStr = '0' + minute

    v = v.replace(/mm/g, minuteStr.substring(minuteStr.length - 2))

    // Millisecond

    v = v.replace(/sss/g, ms)

    v = v.replace(/SSS/g, ms)

    // second

    const secondStr = '0' + second

    v = v.replace(/ss/g, secondStr.substring(secondStr.length - 2))

    v = v.replace(/SS/g, secondStr.substring(secondStr.length - 2))

    // weekDay

    v = v.replace(/E/g, weekDayString)

    return v

  }