vue element 日期选择器日期限制

最近遇到一个需求, 使用饿了么实现日表限制三个月查询, 年表限制一年查询, 如果不做限制的话, 有可能造成数据量过大的请求。
周表不做限制的原因是饿了么的周表就是一个一周内的范围, 已经做了限制
因为是多页面使用, 所以封装为公共组件的形式, 这样好维护, 也方便一点

• 日表限制
• 年表限制

  日表限制

<template>
  <div>
    <el-date-picker
      v-model="datePickDay"
      :picker-options="pickerOptions"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size='mini'
      value-format="yyyyMMdd"
      @change="datePickChangeDay"/>

  </div>
</template>
<script>
import { dateFormat } from '@/utils/tools'
export default {
  name: 'EcFrontDatePickerMonth',

  data() {
    return {
      // 日期
      datePickDay: [
        // 日期选择器绑定的数据，为一个数组，数组第一个是开始时间，第二个是结束时间，需求是获取前一天的数据
        dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyyMMdd'),
        dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyyMMdd')
      ],
      pickDate: '', // 存放getPickDate获取的数据
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate
      },
    }
  },
  mounted() {
    
  },

  methods: {
 // 改变日期触发Change事件，子传父组件特获取到的日期传给父组件
 datePickChangeDay () {
      console.log(this.datePickDay, 'this.datePickDay')
      this.$emit('dateChange', this.datePickDay)
    },
    // 时间选择跨度三个月限制
    getPickDate(pick) {
      // 获取选择后的时间
      this.pickDate = pick
    },
    // 日期禁用方法
    disabledDate(date) {
     // 获取开始时间和结束时间
      const { minDate, maxDate } = this.pickDate
    // 选择后的时间间隔进行计算间隔大于90天后的日期全部 disabled
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf())
        if (diff > 1000 * 3600 * 24 * 90) {
          return true
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
}
</style>

年表限制

需求为可查询一年内的数据, 以月为单位, 也是封装组件

<template>
  <div>
    <el-date-picker
      ref="picker"
      v-model="datePickMonth"
      type="monthrange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="mini"
      value-format="yyyyMM"
      @change="datePickChange"
    />
  </div>
</template>

<script>
import { dateFormat } from '@/utils/tools'
export default {
  name: 'EcFrontDatePickerMonth',

  data() {
    return {
      // 日期
      datePickMonth: [
        dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 720), 'yyyyMM'),
        dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 720), 'yyyyMM')
      ],
      pickDate: '', // 存放getPickDate获取的数据
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate
      },
    }
  },

  mounted() {
    
  },

  methods: {
    datePickChange () {
      console.log(this.datePickMonth, 'this.datePickMonth')
      this.$emit('dateChange', this.datePickMonth)
    },
    // 时间选择跨度三年限制
    getPickDate(pick) {
      this.pickDate = pick
    },
    disabledDate(date) {
      const { minDate, maxDate } = this.pickDate
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf())
        if (diff > 1000 * 3600 * 24 * 365) {
          return true
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
}
</style>

希望对你有用!