问题描述：在使用element-ui el-date-picker组件时，我需要控制日期选择范围，比如开始时间小于结束时间，结束时间大于开始时间
image.png
image.png
代码如下
<el-form-item label="查询开始时间:" prop="startDate">
<el-date-picker
v-model="ruleForm.startDate"
align="right"
type="date"
placeholder="选择日期"
clearable
value-format="yyyy-MM-dd"
:picker-options="startTime"
/>
</el-form-item>
<el-form-item label="查询结束时间:" prop="endDate">
<el-date-picker
v-model="ruleForm.endDate"
align="right"
type="date"
placeholder="选择日期"
clearable
value-format="yyyy-MM-dd"
:picker-options="endTime"
/>
</el-form-item>
<script>
export default {
data() {
return {
startTime: {
disabledDate: time => {
if (this.ruleForm.endDate) {
return (
time.getTime() > new Date(this.ruleForm.endDate).getTime()
)
}
}
},
endTime: {
disabledDate: time => {
if (this.ruleForm.startDate) {
return (
time.getTime() < new Date(this.ruleForm.startDate).getTime() - 24 * 3600 * 1000
)
}
}
}
}
}
</script>
还有一种需求是在第一种情况基础上加上时间范围，比如结束时间大于开始时间并且不能大于开始时间加一个月
效果如下
image.png
image.png
代码如下
data() {
return {
startTime: {
disabledDate: time => {
if (this.ruleForm.endDate) {
return (
time.getTime() > new Date(this.ruleForm.endDate).getTime() || time.getTime() < new Date(this.ruleForm.endDate).getTime() - 30 * 24 * 3600 * 1000
)
}
}
},
endTime: {
disabledDate: time => {
if (this.ruleForm.startDate) {
return (
time.getTime() < (new Date(this.ruleForm.startDate).getTime() - 24 * 3600 * 1000) || time.getTime() > (new Date(this.ruleForm.startDate).getTime() + 30 * 24 * 3600 * 1000)
)
}
}
},
}
}
结束了，如果喜欢欢迎点赞，评论，关注我😄😄😄
