vue+elementUI 时间选择器选择时间时的顺序校验

syx_cainiao

于 2021-03-09 15:24:28 发布

阅读量1.9k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/syx_cainiao/article/details/114372959

版权

本文介绍了如何在Vue项目中使用ElementUI时间选择器进行时间顺序校验，确保预计和实际时间的正确顺序。通过监听时间选择器的变动，实时更新后一个时间选择器的可选范围，并在顺序错误时清空后一个时间，以此实现时间的前后顺序校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面如图显示：
在这里插入图片描述
要求：
时间的前后顺序要有校验

预计aa时间早于预计bb时间
实际cc时间早于实际dd时间早于实际ff时间早于实际ee时间

我的想法：
选中第一个时间后，后一个时间选择器的时间选择范围会以前一个时间选择器选中的时间为开始
当修改两个时间中的前一个时间时，选中前一个选择器的时间大于后一个时间选择器选中的时间时，后一个时间选择器清空

代码：

<el-form ref="formInfo" :inline="true" :model="BudgetYearFormal" label-width="130px" :rules="ruleForm" :disabled="disabled">
	<el-form-item label="预计aa时间" prop="expectOnline">
    	<el-date-picker
        	v-model="BudgetYearFormal.expectOnline"
            placeholder="请选择预计aa时间"
            @change="timeChange">
        </el-date-picker>
    </el-form-item>
	<el-form-item label="预计bb时间" prop="expectAcceptance">
		<el-date-picker
			v-model="BudgetYearFormal.expectAcceptance"
            placeholder="请选择预计bb时间"
            :picker-options="expectAcceptanceAfter"
            @change="timeChange"