抛开“开始时间”和“截止时间”的label不谈,如果选择的截止时间在开始时间之前,逻辑是有问题的吧,所以还是要从代码上做限制。
表现为选择开始时间后,则截止时间只能选择在开始时间之后的日期;选择了截止时间,则开始时间只能选择在截止时间之前的日期。
这里展示了两种限制,一种为置灰,一种为选择不合适的时间后置空另一个时间。
我使用的是vue3 + js的写法,复制后直接可以运行。
<template>
<div class="app-container">
<div class="search-box">
<el-form :inline="true" :model="searchObj">
<el-form-item label="创建时间">
<el-date-picker
v-model="searchObj.startTime"
value-format="YYYY-MM-DD"
type="date"
placeholder="开始时间"
:disabled-date="disabledStartDate"
@change="handleChangeStartDate"
/>
至
<el-date-picker
v-model="searchObj.endTime"
value-format="YYYY-MM-DD"
type="date"
placeholder="结束时间"
:disabled-date="disabledEndDate"
@change="handleChangEndDate"
/>
</el-form-item>
<el-form-item label="">
<el-button @click="onSearch">查询</el-button>
</el-form-item>
<el-form-item label="">
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
import { dayjs } from 'element-plus'
const searchObj = reactive({
startTime: "",
endTime: ""
});
// 如果 searchObj.endTime 存在且小于更新后的 searchObj.startTime,
// 则将 searchObj.endTime 设置为 null。
const handleChangeStartDate = () => {
if (searchObj.endTime && dayjs(searchObj.endTime).isBefore(searchObj.startTime)) {
searchObj.endTime = null;
}
}
// 如果 searchObj.startTime 存在且大于更新后的 searchObj.startTime,
// 则将 searchObj.startTime 设置为 null。
const handleChangEndDate = () => {
if (searchObj.startTime && dayjs(searchObj.startTime).isAfter(searchObj.endTime)) {
searchObj.startTime = null;
}
}
// 选择 startTime 后,对 endTime 做置灰限制
const disabledEndDate = (date) => {
if (!searchObj.startTime) return false;
return date < dayjs(searchObj.startTime).startOf("day")
}
// 选择 endTime 后,对 startTime 做置灰限制
const disabledStartDate = (date) => {
if (!searchObj.endTime) return false;
return date > dayjs(searchObj.endTime).startOf("day")
}
const onSearch = () => {
console.log("查询")
}
const onReset = () => {
searchObj.startTime = null
searchObj.endTime = null
}
</script>