自定义快捷按钮的DateTimePicker 日期时间选择器（elementUI）

【自用，待改进】

效果图：

点击快捷按钮，日期时间选择器中的时间范围会随之变化

传参：

• 昨天时：
  
• 近7天
  
• 近30天
  
• 近1年
  

代码：

<template>
  <div>
    <el-radio-group v-model="fastData" size="small" @change="fastDataChange">
      <el-radio-button label="昨天">el-radio-button>
      <el-radio-button label="近7天">el-radio-button>
      <el-radio-button label="近30天">el-radio-button>
      <el-radio-button label="近1年">el-radio-button>
    el-radio-group >
    <el-date-picker size="small" value-format="timestamp" :picker-options="pickerOptions"
                    v-model="freeDate" @change="freeDateChange" :unlink-panels="true"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    el-date-picker>
  div>
template>

<script>
import {
      timeStampToTimes } from '@/utils'
export default {
     
  name: 'yearSelect',
  props: {
     

  },
  watch: {
     
    'freeDate': {
     
      handler (val, oldval) {
     
        let _param = {
     
          startTime: timeStampToTimes(Math.round(val[0] / 1000), 'Y-M-D'),
          endTime: timeStampToTimes(Math.round(val[1] / 1000 + 24 * 3600), 'Y-M-D')
        }
        console.log(_param)
        this.$emit('change', _param)
      }
    }
  },

  data () {
     
    return {
     
      fastData: '',
      freeDate: [],
      pickerOptions: {
     
        disabledDate (time) {
     
          // 大于昨天的禁止
          let endDay = Date.now() - 24 * 60 * 60 * 1000
          return time.getTime() > endDay
        }
      }
    }
  },
  created () {
     

  },
  mounted () {
     
    this.fastData = '近7天'
    this.fastDataChange('近7天')
  },
  methods: {
     
    fastDataChange (time) {
     
      let d = []
      if (time === '昨天') {
     
        d = [Math.round(new Date() - 24 * 3600 * 1000), Math.round(new Date() - 24 * 3600 * 1000)]
      }
      if (time === '近7天') {
     
        d = [Math.round(new Date() - 7 * 24 * 3600 * 1000), Math.round(new Date() - 24 * 3600 * 1000)]
      }
      if (time === '近30天') {
     
        d = [Math.round(new Date() - 30 * 24 * 3600 * 1000), Math.round(new Date() - 24 * 3600 * 1000)]
      }
      if (time === '近1年') {
     
        d = [Math.round(new Date() - 365 * 24 * 3600 * 1000), Math.round(new Date() - 24 * 3600 * 1000)]
      }
      this.freeDate = d
    },
    freeDateChange () {
     
      this.fastData = ''
    }
  }
}
</script>

/**
 * 时间戳转化为年 月 日 时 分 秒
 * number: 传入时间戳
 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致
 */
export function timeStampToTimes (number, format) {
     
  // 数据转化
  function formatNumber (n) {
     
    n = n.toString()
    return n[1] ? n : '0' + n
  }
  let formateArr = ['Y', 'M', 'D', 'h', 'm', 's']
  let returnArr = []

  let date = new Date(number * 1000)
  returnArr.push(date.getFullYear())
  returnArr.push(formatNumber(date.getMonth() + 1))
  returnArr.push(formatNumber(date.getDate()))
  returnArr.push(formatNumber(date.getHours()))
  returnArr.push(formatNumber(date.getMinutes()))
  returnArr.push(formatNumber(date.getSeconds()))

  for (let i in returnArr) {
     
    format = format.replace(formateArr[i], returnArr[i])
  }
  return format
}