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

乐~~~2025-08-22 22:43

html （组件：element-ui）

重点： :picker-options="pickerOptions"

html 复制代码

<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部分

javascript 复制代码

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()
}