el-date-picker日期选择限制范围的实例代码
更新时间:2022年09月21日 09:30:53 作者:Z-HarOld
这篇文章主要介绍了el-date-picker日期选择限制范围,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1.如果只比较两个值的话---效果是这种的



// 这是<template>的
<el-row>
<el-col :span="12">
<el-form-item label="计划评审日期(起)" prop="planPsDateStart">
<el-date-picker
v-model="vm.edit.data.planPsDateStart"
type="date"
:picker-options="pickerOption_start"
placeholder="开始时间"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划评审日期(止)" prop="planPsDateEnd">
<el-date-picker
v-model="vm.edit.data.planPsDateEnd"
type="date"
:picker-options="pickerOption_end"
placeholder="结束时间"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
// 这是<script>下的data的
pickerOption_start: {
disabledDate: (time) => {
if (this.vm.edit.data.planPsDateEnd !== undefined) {
return time.getTime() > this.vm.edit.data.planPsDateEnd
}
}
},
pickerOption_end: {
disabledDate: (time) => {
if (this.vm.edit.data.planPsDateStart !== undefined) {
return time.getTime() < this.vm.edit.data.planPsDateStart
}
}
}2.如果是table一直在循环这种日期,而且只比较每一行的两个日期
效果是这样的


// 放在el-table下的两列
<el-table-column prop="lastModifyUserId" label="计划开始日期" align="center">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.planStart"
type="date"
placeholder="计划开始日期"
:picker-options="{disabledDate: (time) => {if (scope.row.planEnd !== undefined) {return time.getTime() > scope.row.planEnd} }}"
style="width: 100%"
:disabled="limitsDisabledFun()"
/>
</template>
</el-table-column>
<el-table-column prop="name" label="计划结束日期" align="center">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.planEnd"
type="date"
placeholder="计划结束日期"
:picker-options="{disabledDate: (time) => {if (scope.row.planStart !== undefined) {return time.getTime() < scope.row.planStart} }}"
style="width: 100%"
:disabled="limitsDisabledFun()"
/>
</template>
</el-table-column>原理一样的-就是把data下的pickerOption直接嵌到代码里面,不放在data中
到此这篇关于el-date-picker日期选择限制范围的实例代码的文章就介绍到这了,更多相关el-date-picker日期选择限制范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)
这篇文章主要给大家介绍了关于Vue项目配置、切换主题颜色(mixin+scss方式)的相关资料,根据预设的配色方案,在前端实现动态切换系统主题颜色,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
vue中json格式化显示数据(vue-json-viewer)
这篇文章主要给大家介绍了关于vue中json格式化显示数据(vue-json-viewer)的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下2024-05-05


最新评论