1.限制开始日期和结束日期不能超过一年
<el-date-pickerclass="date-time=select"v-model="timeValue"type="daterange"value-format="YYYY-MM-DD"format="YYYY-MM-DD"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"@change="timeChange":disabled-date="disabledDate"@calendar-change="calendarChange"
/>
// 选中日历日期后会执行的回调!!只选择一个日期就会执行,官网写的不清楚
// 主要用这个方法获取到用户选择的初始时间,然后在禁用方法里通过这个时间设置结束时间的禁用时间
const calendarChange = (dates: any) => {let hasSelectDate = dates !== null && dates.length > 0selectData.value = hasSelectDate ? dates[0] : null
}
const disabledDate = (time: any) => {const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳const tempTime = Date.now() - timeRangeif (selectData.value) {// console.log('有开始时间了', selectData.value)const minTime = new Date(selectData.value).getTime()const maxTime = new Date(selectData.value).getTime() + timeRange * 365if (tempTime < maxTime) {return time.getTime() < minTime || time.getTime() > tempTime}return time.getTime() < minTime || time.getTime() > maxTime} else {return time.getTime() >= tempTime}
}
2.限制开始日期和结束日期跨度必须超过2天
const disabledAllDate = (time: any) => {const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳const tempTime = Date.now() - timeRangeif (selectData.value) {// console.log('有开始时间了', selectData.value)const minTime = new Date(selectData.value).getTime() - timeRange * 2const maxTime = new Date(selectData.value).getTime() + timeRange * 2return (time.getTime() > minTime && time.getTime() < maxTime) || time.getTime() >= tempTime} else {return time.getTime() >= tempTime}
}