需求描述:
element-plus + vue3 ,两个单独的日期选择器,如果开始日期比结束日期大,就将其互换
代码实现:
<el-form-item label="时间:">
<el-date-picker
v-model="startTime"
type="date"
clearable
:disabled-date="disabledDate"
placeholder="选择开始日期"
value-format="YYYY-MM-DD"
@change="dateChangeEvent"
/>
</el-form-item>
<el-form-item label="-">
<el-date-picker
v-model="endTime"
type="date"
placeholder="选择结束日期"
:disabled-date="disabledDate"
value-format="YYYY-MM-DD"
@change="dateChangeEvent"
/>
</el-form-item>
const formData = reactive({
startTime: '',
endTime: '',
})
const dateChangeEvent = () => {
if (formData.startTime && formData.endTime) {
if (
new Date(formData.startTime).getTime() -
new Date(formData.endTime).getTime() >
0
) {
// 证明开始时间比结束时间大,需要把两个互相换一下
;[formData.startTime, formData.endTime] = [
formData.endTime,
formData.startTime,
]
console.log(formData.startTime, formData.endTime)
}
}
}