el-date-picker比较两个时间值大小，el-date-picker循环组件比较两个时间值大小

HuiRonmantic

已于 2022-05-11 16:19:49 修改

阅读量2k

点赞数 1

分类专栏： Element-ui Vue技术栈文章标签：前端

于 2022-05-05 14:07:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/124587550

版权

Vue技术栈同时被 2 个专栏收录

66 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

Element-ui

20 篇文章

订阅专栏

该博客详细展示了如何在Vue中使用el-date-picker组件进行时间值的比较和验证。通过监听change事件，当用户选择开始时间和结束时间时，实时检查是否符合时间顺序，若开始时间大于结束时间则显示警告。此外，还展示了在循环组件中如何处理多个时间比较的情况，以及如何处理用户增加和删除时间条目的操作。整个过程涉及到了表单验证、时间格式转换和消息提示的实现。

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

el-date-picker比较两个时间值的大小，el-date-picker循环组件比较时间值的大小

在这里插入图片描述

change事件用于时间比较值

dom部分
 <el-row>
                  <el-col :span="12">
                    <el-form-item label="*开始时间:">
                      <el-date-picker
                        v-model="lists[index].开始时间"
                        name="开始时间"
                        placeholder="请选择时间"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm"
                        format="yyyy-