【elementUI】时间组件传入控制台的值的格式与前端页面显示的不同

是言若呀~

已于 2025-01-13 09:52:01 修改

阅读量688

点赞数 12

CC 4.0 BY-SA版权

分类专栏： bug记录 vue 文章标签：前端 elementui javascript vue

于 2024-01-08 12:31:46 首次发布

本文链接：https://blog.youkuaiyun.com/yinno4/article/details/135454270

bug记录同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

文章讲述了在使用Element-UI的日期时间选择器时，前端显示的yyyy-MM-ddhh:mm:ss格式与打印到控制台的带有时区格式不同。解决方法是在组件上添加value-format属性来指定绑定值的格式，确保前后端时间显示一致。

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

问题描述

使用element-ui的组件时,选择后的时间显示在前端的格式是’yyyy-MM-dd hh:mm:ss’,而传入打印在控制台的格式是带有时区的在这里插入图片描述

解决前的代码:

<el-date-picker
    v-model="startTime"
    class="ml-5"
    type="datetime"
    placeholder="选择开始时间">
</el-date-picker>
<el-date-picker
    v-model="endTime"
    class="ml-5"
    type="datetime"
    placeholder="选择结束时间">
</el-date-picker>

结果:
在这里插入图片描述

解决方法:添加一个在时间选择器上添加一个可以绑定值的格式的属性 value-format

日期格式(转自elementui官方文档):
使用format指定输入框的格式；使用value-format指定绑定值的格式。
默认情况下，组件接受并返回Date对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：

格式	含义	备注	举例
yyyy	年		2017
M	月	不补0	1
MM	月		01
W	周	仅周选择器的 format 可用；不补0	1
WW	周	仅周选择器的 format 可用	01
d	日	不补0	2
dd	日		02
H	小时	24小时制；不补0	3
HH	小时	24小时制	03
h	小时	12小时制，须和 A 或 a 使用；不补0	3
hh	小时	12小时制，须和 A 或 a 使用	03
m	分钟	不补0	4
mm	分钟		04
s	秒	不补0	5
ss	秒		05
A	AM/PM	仅 format 可用，大写	AM
a	am/pm	仅 format 可用，小写	am
timestamp	JS时间戳	仅 value-format 可用；组件绑定值为number类型	1483326245000
[MM]	不需要格式化字符	使用方括号标识不需要格式化的字符 (如 [A] [MM])	MM

<el-date-picker
    v-model="startTime"
    class="ml-5"
    type="datetime"
    placeholder="选择开始时间"
    value-format="yyyy-MM-dd hh:mm:ss">
</el-date-picker>
<el-date-picker
    v-model="endTime"
    class="ml-5"
    type="datetime"
    placeholder="选择结束时间"
    value-format="yyyy-MM-dd hh:mm:ss" >
</el-date-picker>

结果:
前端展示格式如下图:

控制台展示格式如下图:
在这里插入图片描述