vue Element UI 日期时间选择器获取格式问题

最新推荐文章于 2026-05-11 14:26:43 发布

原创最新推荐文章于 2026-05-11 14:26:43 发布 · 1.3w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#element ui

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍在ElementUI中如何解决表单提交时日期时间格式不符合预期的问题，通过调整日期选择器的格式化属性和验证规则，实现了既满足格式要求又能正确验证的选择器配置。

问题：在使用element ui的时候由于是表单提交，所以使用了rule规则验证。如下：

<el-date-picker v-model="form.leaveTime" type="datetime" placeholder="选择日期时间"></el-date-picker>

rules: {
        leaveTime: [
          {
            type: "date",
            required: true,
            message: "请选择时间"，
            trigger: "change"
          }
        ]
      }

经过双向绑定，获取到的时间日期在提交表单的时候获取到参数为：

而控制台打印的参数为：

和要求的格式不一致，导致请求404 。

查看了官网文档，

value-format="yyyy-MM-dd HH:mm:ss"

可以格式化获取到的value，于是乎直接写了一下代码：

<el-date-picker v-model="form.leaveTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

控制台打印到的value正是我想要的，但是却出现了一下问题：选择好时间后直接报错，并且点击确定，也是同样的错误。

在确定这样写没错的情况下，查了资料才发现是因为前面我设置了rule，rule的验证规则是change，而这里的value-format也是change，就导致了getTime的冲突，于是乎直接注释掉，该项的rule规则，不会再报错了，并且时间格式也能正常转换。

但是这是出现的问题是，我设置的验证没了。重新设置了以下代码进行验证以此解决了这个问题

leaveTime: [
          {
            // 注释掉type和trigger，是为了解决格式化时间日期的时候出现的bug
            // type: "date",
            required: true,
            message: "请选择时间"
            // trigger: "change"
          }
        ]