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

问题:在使用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"
          }
        ]

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值