Vue picker-option属性,开始结束都可选当天

1 .作用:限制时间框的输入范围(下为html部分)

<el-form-item label="开始时间">
<el-date-picker
v-model="formData.startTime"
type="date"
:picker-options="pickerOptionsStart"
size="small"
format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="formData.endTime"
type="date"
:picker-options="pickerOptionsEnd"
size="small"
format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
2.data部分(注:disabledDate和disabledDate后边写成function格式)

data() {
return {
// 禁用今天以后的日期
pickerOptionsStart: {
disabledDate: (time) => {
return this.disabledStart(time);
},
},
pickerOptionsEnd: {
disabledDate: (time) => {
return this.disabledEnd(time);
},
},
formData:{
startTime:'',
endTime:''
},
}
}
3.methods部分

//限制时间
disabledStart(time) {
return (
time.getTime() > Date.now() || //开始时间小于当前时间点
time.getTime() > new Date(this.formData.endTime).getTime()//开始时间小于结束时间
);
},
disabledEnd(time) {
return (
time.getTime() > Date.now() || //结束时间小于当前时间
time.getTime() < new Date(this.formData.startTime).getTime() //结束时间大于开始时间
);
},
4.补充:加入要设置时间范围开始时间和结束时间都可以选择当天,开始时间的限制后边减去一个8.64*10^7,即:

//限制时间
disabledStart(time) {
return (
time.getTime() > Date.now() || //开始时间小于当前时间点
time.getTime() > new Date(this.formData.endTime).getTime()- 8.64e7//开始时间小于结束时间
);
},
disabledEnd(time) {
return (
time.getTime() > Date.now() || //结束时间小于当前时间
time.getTime() < new Date(this.formData.startTime).getTime() //结束时间大于开始时间
);
},
————————————————
版权声明：本文为CSDN博主「高晨辉@610709891.qq.com」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gaochenhui0435/article/details/120946288

标签：picker,Vue,return,option,getTime,formData,时间,time,Date
来源： https://www.cnblogs.com/gao-ze/p/16244713.html