antv-design写了一个选择时间范围的组件

方式一：

方式二：

<template>
  <div class="timeFilter">
    <a-row>
      <a-col
        :span="12">
        <a-checkable-tag
          v-model="date.checked1"
          @change="handleChange('yesterday')">
          昨日
        </a-checkable-tag>
        <a-checkable-tag v-model="date.checked2" @change="handleChange('thisweek')">
          近7日
        </a-checkable-tag>
        <a-checkable-tag v-model="date.checked3" @change="handleChange('thismonth')">
          近30日
        </a-checkable-tag>
        <!-- <a-checkable-tag v-model="date.checked4" @change="handleChange('thisyear')">
          全年
        </a-checkable-tag> -->
      </a-col>
      <a-col
        :span="12">
        <a-range-picker
          :disabledDate="disabledDate"
          :placeholder="['开始时间','结束时间']"
          format="YYYY-MM-DD"
          v-model="rangePicker"
          @change="onChange"
          style="max-width:300px">
        <!--        <a-icon slot="suffixIcon" :component="IconExclamationCircle" />-->
        </a-range-picker>
      </a-col>
    </a-row></div>
</template>

<script>
import dayjs from 'dayjs'
import moment from 'moment'

export default {
  name: 'TimeFilter',
  data () {
    return {
      date: { checked1: false, checked2: true, checked3: false, checked4: false }, // 昨日本周选中
            rangePicker: [dayjs(new Date().setDate(new Date().getDate() - 6)).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')]||
null // 时间
    }
  },
  component: {},
  filters: {},
  computed: {},
  watch: {},
  methods: {
    // 搜索时间范围
    onChange (data) {
      this.searchType = null
      this.webRadioValue = 'day'
      if (this.rangePicker) {
        this.date = { checked1: false, checked2: false, checked3: false, checked4: false }
        this.timeType = ''
        if (this.rangePicker[0] && this.rangePicker[1]) {
          this.$nextTick(() => {
            // this.$refs.programUpdate.getlineList()
          })
        }
      }
    },
    handleChange (type) {
      const day1 = new Date()
      const day2 = new Date()
      let dstStartDate = null
      let dstEndDate = null
      switch (type) {
        case 'yesterday':
          day1.setDate(day1.getDate())
          // day1.setDate(day1.getDate() - 1)
          dstStartDate = dayjs(day1).format('YYYY-MM-DD')
          dstEndDate = dayjs(day1).format('YYYY-MM-DD')
          this.date.checked1 = true
          this.date.checked2 = false
          this.date.checked3 = false
          this.date.checked4 = false
          this.timeType = 'yesterday'
          break
        case 'thisweek':
          // dstStartDate = this.showWeekFirstDay()
          // dstEndDate = this.showWeekLastDay()
          day1.setDate(day1.getDate() - 6)
          day2.setDate(day2.getDate())
          dstStartDate = dayjs(day1).format('YYYY-MM-DD')
          dstEndDate = dayjs(day2).format('YYYY-MM-DD')
          this.date.checked1 = false
          this.date.checked2 = true
          this.date.checked3 = false
          this.date.checked4 = false
          this.timeType = 'thisweek'
          break
        case 'thismonth':
          day1.setDate(day1.getDate() - 29)
          day2.setDate(day2.getDate())
          dstStartDate = dayjs(day1).format('YYYY-MM-DD')
          dstEndDate = dayjs(day2).format('YYYY-MM-DD')
          // dstStartDate = dayjs(dayjs().month(dayjs().month()).startOf('month').valueOf())
          // dstEndDate = dayjs(dayjs().month(dayjs().month()).endOf('month').valueOf())
          this.date.checked1 = false
          this.date.checked2 = false
          this.date.checked3 = true
          this.date.checked4 = false
          this.timeType = 'thismonth'
          break
        case 'thisyear':
          dstStartDate = dayjs(dayjs().year(dayjs().year()).startOf('year').valueOf())
          dstEndDate = dayjs(dayjs().year(dayjs().year()).endOf('year').valueOf())
          this.date.checked1 = false
          this.date.checked2 = false
          this.date.checked3 = false
          this.date.checked4 = true
          this.timeType = 'thisyear'
          break
      }
      if (dstStartDate && dstEndDate) {
        this.rangePicker = [dayjs(dstStartDate).format('YYYY-MM-DD'), dayjs(dstEndDate).format('YYYY-MM-DD')]
        this.$nextTick(() => {
          // this.$refs.programUpdate.getlineList()
        })
      }
      // 调用请求
    },
    nearlySevenDayStart () {
      const Nowdate = new Date()
      const WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
      const M = Number(WeekFirstDay.getMonth()) + 1
      return dayjs().year() + '-' + M + '-' + WeekFirstDay.getDate()
    },
    // 获取本周第一天
    showWeekFirstDay () {
      const Nowdate = new Date()
      const WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
      const M = Number(WeekFirstDay.getMonth()) + 1
      return dayjs().year() + '-' + M + '-' + WeekFirstDay.getDate()
    },
    // 本周最后一天
    showWeekLastDay () {
      const Nowdate = new Date()
      const WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
      const WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
      const M = Number(WeekLastDay.getMonth()) + 1
      return dayjs().year() + '-' + M + '-' + WeekLastDay.getDate()
    },
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    // 时间范围限制，上下90，结束时间
    // disabledDate (current) {
    //   // let minTime = null
    //   let maxTime = null
    //   if (this.rangePicker[0]) {
    //     const one = 90 * 24 * 3600 * 1000
    //     // minTime = moment(this.rangePicker[0]).valueOf() - one
    //     maxTime = moment(this.rangePicker[0]).valueOf() + one
    //   }
    //   return this.rangePicker[0] ? current && (current > maxTime || current < moment(this.rangePicker[0]).valueOf()) : null
    // },
    // 时间范围限制，上下90，开始时间
    disabledDate1 (current) {
      let minTime = null
      if (this.rangePicker[1]) {
        const one = 90 * 24 * 3600 * 1000
        minTime = moment(this.rangePicker[1]).valueOf() - one
      }
      return this.rangePicker[1] ? current && (current < minTime || current > moment(this.rangePicker[1]).valueOf()) : null
    }
  }
}
</script>

<style lang="less" scoped>
.timeFilter{
  // background: red;
}
</style>