element el-date-picker 时间选择器选择时的范围限制

element 基于vue2

[暂时省略…]

element-plus 基于vue3

html

<el-date-picker
    v-model="dateVal"
    type="datetimerange"
    range-separator=""
    :clearable="false"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabled-date="disabledDate" //时间范围限制的关键
    @change="getData"
    @calendar-change="calendarChange" // 获取选择的第一个时间
/>

js

//data
const dateVal = ref([])
const begins = ref(undefined)

const disabledDate  = (time)=> {
	// 判断是否有选中时间
  if(begins.value !== undefined){
  	// 限制3天
    let startBool = (begins.value.getTime() - time.getTime()) <= (24*2*3600*1000)
    let endBool = (time.getTime() - begins.value.getTime()) <= (24*2*3600*1000)
	//禁用不符合要求的所有时间		
    return !startBool || !endBool || time.getTime() > Date.now()
  }
  return time.getTime() > Date.now()
}

//时间变化时触发的函数
const calendarChange = (date)=>{
  if(date[0]!==null&&date[1]===null){ 
  // 判断是否选择了第一个时间
    begins.value = date[0] 
  }else{ 
  // 当两个时间都被选中时,清除选中时间
    begins.value = undefined
  }
}