element ui 日期选择器禁用问题
要求 :两个独立的日期选择器;开始日期选择不能低于结束时间;结束日期选择不能早于开始日期
方法 element ui的 picker-options里面的disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean
<template>
<div class="elementBox">
<div class="block">
<span class="demonstration">开始时间:</span>
<el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">结束时间:</span>
<el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd">
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
data() {
return {
startDate: "",//开始日期
pickerOptionsStart: {
disabledDate: (time) => {
let maxDate = new Date(this.endDate).getTime()//拿到输入的结束日期
return time.getTime()>maxDate //判断大于结束日期 返回true 禁用
}
},
endDate: "",//结束日期
pickerOptionsEnd: {
disabledDate: (time) => {
let minDate = new Date(this.startDate).getTime()//拿到输入的开始日期
return time.getTime()<minDate //判断小于开始日期 返回true 禁用
}
},
}
}
}
</script>
<style lang='less' scoped>
.elementBox {
display: flex;
.block {
margin-left: 20px;
}
}
</style>
效果
margin-left: 20px;
}
}
效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/091848312e5d45c2ab3070dd67b478d4.bmp#pic_center)