el-date-picker type=daterange 日期范围限制

UI组件（element-ui）

重点： :picker-options="pickerOptions"

<template>
  <el-date-picker
    v-model="form.dateRange"
    type="daterange" 
    value-format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>

js部分

data(){
 return{
   form:{
    a:[]
   },
   jyData:['2025-07-1','2025-09-01'], //限制区间（只能选这个区间内的）
   pickerMinDate: '', // 用于存储开始日期的时间戳
   pickerOptions: {
     onPick: this.handlePick,
     disabledDate: this.handleDisabledDate
   }
 }
}
handlePick({ maxDate, minDate }) {
  // 记录开始日期的时间戳（转为当天0点，避免时间影响）
 this.pickerMinDate = minDate ? new Date(minDate.toDateString()).getTime() : '';
 if (maxDate) {
        this.pickerMinDate = '';
  }
},
// 限制区间
handleDisabledDate(time) {
  const startData=new.Date(this.jyData[0])
  const endData=new.Date(this.jyData[1])
  return time.getTime()<startData.getTime() || time.getTime()>endData.getTime()
}

限制在当月【开始日期、结束日期】期间。

//获取当月第一天和最后一天
const currentDate=new Date() //获取当前时间
const currentFirstDay=new Date(currentDate.getFullYear(),currentDate.getMonth(),1) //获取当前月份的第一天 00:00:00
const currentLastDay=new Date(currentDate.getFullYear(),currentDate.getMonth()+1,0,23,59,59) //获取当前月份的最后一天

//结合上面的handleDisabledDate 事件
return time.getTime()<currentFirstDay.getTime() || time.getTime()>currentLastDay.getTime()