标签：picker Vue return option getTime formData 时间 time Date

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。