element日期组件多范围选择

效果展示

1.组件

<template>
  <el-date-picker
    @change="changeTime"
    v-model="finleTime"
    type="datetimerange"
    :picker-options="pickerOptions"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']"
    :clearable="false"
    range-separator="~"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    align="left"
  >
  </el-date-picker>
</template>
<script>
import { getMyDate } from '@/utils/utils.js'
export default {
  name: 'filterDateTime',
  props: {
    start: String,
    end: String,
    pickerOptions: Object
  },
  data() {
    return {
      finleTime: []
    }
  },
  created() {
    this.resetTime()
  },
  methods: {
    resetTime() {
      const date = new Date()
      const newtime = new Date(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate())
      const start = getMyDate(newtime.getTime() - 3600 * 1000 * 24 * 6)
      const end = getMyDate(newtime.getTime() + 3600 * 1000 * 24 - 1000)
      this.$emit('update:start', start)
      this.$emit('update:end', end)
      this.finleTime = [start, end]
    },
    // 选择时间
    changeTime(value) {
      this.$emit('update:start', this.finleTime[0])
      this.$emit('update:end', this.finleTime[1])
      this.$emit('change', this.finleTime)
    }
  }
}
</script>

2.方法

<SFilterDateTime
   :start.sync="filters.startTime"
   :end.sync="filters.endTime"
   :defaultValue="false"
   :picker-options="formPickerOptions"
   :distance="0"
  :default-time="['00:00:00', '23:59:59']"
  format="MM-dd HH:mm"
></SFilterDateTime>


data() {
    const timeShortCuts = TIME_LIST.filter((item) => !['近31天'].includes(item.text)).map((item) => {
      const obj = {}
      obj.text = item.text
      const [start, end] = item.value
      obj.onClick = (picker) => {
        picker.$emit('pick', [`${start} 00:00:00`, `${end} 23:59:59`])
      }
      return obj
    })
    return {
      formPickerOptions: {
        shortcuts: [...timeShortCuts]
      }
   }

3，时间范围定义

import dayjs from 'dayjs'
const updateLocale = require('dayjs/plugin/updateLocale')
const quarterOfYear = require('dayjs/plugin/quarterOfYear')
dayjs.extend(updateLocale)
dayjs.extend(quarterOfYear)
dayjs.updateLocale('en', {
  weekStart: 1
})
export const TIME_LIST = [
  {
    text: '近31天',
    value: [
      dayjs()
        .subtract(30, 'day')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  },
  {
    text: '近30天',
    value: [
      dayjs()
        .subtract(29, 'day')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  },
  {
    text: '今天',
    value: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
  },
  {
    text: '昨天',
    value: [
      dayjs()
        .subtract(1, 'day')
        .format('YYYY-MM-DD'),
      dayjs()
        .subtract(1, 'day')
        .format('YYYY-MM-DD')
    ]
  },
  {
    text: '近3天',
    value: [
      dayjs()
        .subtract(2, 'day')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  },
  {
    text: '近7天',
    value: [
      dayjs()
        .subtract(6, 'day')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  },
  {
    text: '本周',
    value: [
      dayjs()
        .startOf('week')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  },
  {
    text: '本月',
    value: [
      dayjs()
        .startOf('month')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  },
  {
    text: '本季度',
    value: [
      dayjs()
        .startOf('quarter')
        .format('YYYY-MM-DD'),
      dayjs().format('YYYY-MM-DD')
    ]
  }
]