ElementUI 日期范围选择器el-date-picker设置选择跨度一年、30天、7天

利用el-date-picker组件的picker-options属性以及属性下的disabledDate和onPick来实现选择日期范围跨度设置。

pickerOptions: {
    onPick: ({ maxDate, minDate }) => {
      this.selectDate = minDate.getTime()
      if (maxDate) {
        this.selectDate = ''
      }
    },
    disabledDate: time => {
      var isSelected = false
      if (this.selectDate !== '') {
        const one = 365 * 24 * 3600 * 1000 // 一年
        const minTime = this.selectDate - one
        const maxTime = this.selectDate + one
        isSelected = time.getTime() <= minTime || time.getTime() > maxTime
      }
      // 这么写的好处是：跨度在一年的同时不超过当前日期
      return isSelected || time.getTime() > Date.now() - 8.64e6
    }
 }