需要用到 DatePicker 里面的 picker-options 方法
disabledDate onPick方法
<el-date-picker
v-model="form.xxxx"
type="daterange"
value-format="yyyy-MM-dd"
:clearable="false"
:picker-options="pickerOptions"
start-placeholder="开始"
end-placeholder="结束">
</el-date-picker>
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.currentDate = minDate.getTime();
if (maxDate) {
this.currentDate = "";
}
},
disabledDate: (time)=> limitDate(time, this.currentDate)
},
//禁用未来日期,限制时间范围为60天
limitDate = (time, currentDate) => {
if (currentDate!== "") {
const one = 60 * 24 * 3600 * 1000; //设置现在时间范围60天
const minTime = currentDate - one; //获取当前时间往前30天的时间
const maxTime = currentDate + one; //获取当前时间往后30天的时间
return (
//限制时间不能选中当前时间往前的30天, 往后的30天
time.getTime() < minTime ||
time.getTime() > maxTime ||
time.getTime() > Date.now() //设置禁用未来日期
)
} else {
return time.getTime() > Date.now() //设置禁用未来日期
}
}