el-date-picker默认选择当前月及往前11个月，禁止当月之后的数据

项目场景：

例如：需求是默认显示当前月，以及当前月之前个月的数据，禁止选择但当月之后月份。

---

 

解决方案：

<el-date-picker
 v-model="valueDate"
:clearable="false"
type="monthrange"
:editable="false"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions"
 @blur="getTime"
/>

  data(){
       return{
   valueDate: [], // 报警时间
   pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && !maxDate) {
            this.startDate = new Date(minDate)
          } else {
            this.startDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.startDate) {
            const startMonth = this.startDate.getMonth()
            const maxDate = new Date(this.startDate)
            const maxMonth = startMonth + 11
            maxDate.setMonth(maxMonth)
            const minDate = new Date(this.startDate)
            const minMonth = startMonth - 11
            minDate.setMonth(minMonth)
            return time.getTime() > Date.now() || time.getTime() > maxDate.getTime() || time.getTime() < minDate.getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
        }
   }

  created() {
    Date.prototype.format = formatDate //这是一个公用的方法
    this.valueDate[0] = new Date(new Date().getFullYear(), new Date().getMonth() - 11, 1).format('yyyy-MM')
    this.valueDate[1] = new Date(new Date().getFullYear(), new Date().getMonth(), 1).format('yyyy-MM')
    this.searchForm.startTime = this.valueDate[0]
    this.searchForm.endTime = this.valueDate[1]
  },

月份发生改变的时候拿到最新的月份数据

    // 失去焦点拿到组件的时间
    getTime() {
      Date.prototype.format = formatDate
      this.searchForm.startTime = this.valueDate[0]
      this.searchForm.endTime = this.valueDate[1]
      // console.log(this.valueDate, this.searchForm.endTime)
      console.log('开始月份', this.searchForm.startTime)
      console.log('结束月份', this.searchForm.endTime)
    },

公用的时间转换方法：

// 使用的时候直接引入到页面就可以了
export function formatDate(fmt) {
  const o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'h+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
  for (const k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
  }
  return fmt
}