vue el-date-picker 开始日期不能大于结束日期的实现代码
更新时间：2024年01月26日 15:23:40 作者：guochanof
这篇文章主要介绍了vue el-date-picker 开始日期不能大于结束日期的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
HTML
<el-form-item label="开始日期" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStartq" placeholder="请选择开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEndq" placeholder="请选择结束时间">
</el-date-picker>
</el-form-item>JS: (写在data内)
满足开始日期不能大于结束日期,并且****几种情况如下:
开始日期不能大于结束日期
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() >
new Date(this.form.endTime).getTime() -
1 * 24 * 60 * 60 * 1000
);
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() <
new Date(this.form.startTime).getTime() -
8.64e7 +
1 * 24 * 60 * 60 * 1000
);
}
},开始日期不能大于结束日期 --选择今天以后的日期--今天可选
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() >
new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000
);
}
return time.getTime() < Date.now() - 8.64e7;
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() <
new Date(this.form.startTime).getTime() -
8.64e7 +
1 * 24 * 60 * 60 * 1000
);
}
},开始日期不能大于结束日期--选择今天以后的日期--今天不可选
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() >
new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000
);
}
return time.getTime() < Date.now();
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() < Date.now() ||
time.getTime() <
new Date(this.form.startTime).getTime() -
8.64e7 +
1 * 24 * 60 * 60 * 1000
);
}
},开始日期不能大于结束日期--选择今后一年内的日期
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() <
new Date(this.form.endTime).getTime() - 365 * 24 * 60 * 60 * 1000
);
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() >
new Date(this.form.startTime).getTime() +
8.64e7 +
365 * 24 * 60 * 60 * 1000
);
}
},只有一个日期框, 要求只能选今天以后的
pickerOptions: {
disabledDate: time => {
// return time.getTime() < Date.now() - 8.64e7; // 今天可选
return time.getTime() < Date.now();//今天不可选
}
},到此这篇关于vue el-date-picker 开始日期不能大于结束日期的文章就介绍到这了,更多相关vue el-date-picker 开始日期不能大于结束日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文通过实例代码给大家介绍了vue和webpack项目构建过程常用的npm命令,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了Vue项目运行时出现JavaScript堆内存已满的错误,并讨论了解决方法,通过下载特定插件并修改相关文件,解决了项目运行时的内存溢出问题,需要的朋友可以参考下2025-05-05
watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下2022-11-11
Vue是一个轻量级、渐进式的Javascript框架,如果想要要开发全新的Vue项目,建议项目构建工具vue-cli,下面这篇文章主要给大家介绍了关于VSCode创建Vue项目的完整步骤,需要的朋友可以参考下2022-06-06
在开始学习vue的时候,对于新手安装这个环境是真的搞人心态,不友好,下面这篇文章主要给大家介绍了关于Vue安装与环境配置的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue slot 在子组件中显示父组件传递的模板,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue中使用微信公众号js-sdk踩坑记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了element-vue实现网页锁屏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
前端请求超时截断axios timeout设置未生效情况解决记录
在项目中遇到了后台接口返回数据慢的时候往往需要设置请求失效时间,在项目中遇到设置timeout失效问题由此记录下来,这篇文章主要给大家介绍了前端请求超时截断axios timeout设置未生效情况解决的相关资料,需要的朋友可以参考下2024-07-07
最新评论