【VUE】时区为UST怎么办?直接淦Date!!!

问题来源

前端处理List数据中大多数都是要处理createtime,遇到时间显示不对(时区错误)怎么处理呢?

UST数据格式:2023-11-02T03:24:36.089+00:00

在数据库显示:

前端table显示:

分析:

我createtime处理方式:

fileds.createtime.toString().slice(0, 16).replace('T', ' ');

##代码解释##

.toString():将时间戳或日期对象转换为字符串形式。
.slice(0, 16):这一步从字符串中截取子字符串,从索引位置 0 开始,一直到索引位置 15(不包括索引位置 16)为止。这将截取 ISO 8601 格式的日期时间字符串的前 16 个字符,包括日期部分和时间部分,但不包括时区信息。
.replace('T', ' '):这一步将字符串中的字符 'T' 替换为空格 ' '。在 ISO 8601 格式的日期时间字符串中, 'T' 用于分隔日期部分和时间部分。通过将 'T' 替换为空格,可以使日期时间字符串更易读,例如从 "2023-11-02T03:24:36" 变为 "2023-11-02 03:24:36"

注:代码直接用处理字符串处理日期忽略了时区变化!!!

 解决方案:

方案一:默认格式YY/MM/DD HH:MM:SS

将数据转换为日期格式,使用本地时间字符串(可以设置固定时区)

new Date(fileds.createtime).toLocaleString();

##代码解释##

new Date(fileds.createtime):创建一个新的 Date 对象,将 fileds.createtime 字符串转换为日期对象。

.toLocaleString():将日期对象转换为本地时间字符串。toLocaleString() 方法会根据运行代码的用户的本地设置来格式化日期和时间。如果不提供参数,则会使用浏览器的默认语言环境和格式选项。

##toLocaleString说明##

语法:dateObj.toLocaleString([locales [, options]])

locales:可选参数,表示语言环境的字符串或字符串数组。如果未提供该参数,则使用默认语言环境。例如,'en-US' 表示英文(美国)语言环境,'zh-CN' 表示中文(中国)语言环境等。
options:可选参数,表示格式选项的对象。具体选项请参考 MDN 文档。

toLocaleString() 方法根据指定的语言环境和选项将日期和时间对象转换为相应的本地格式字符串。例如,在英文(美国)语言环境下,可能会使用 12 小时制的时间格式,而在其他语言环境可能使用 24 小时制的时间格式,具体格式会根据本地的习惯而有所不同。

方案一显示结果如下:

方案二:自定义显示格式YY-MM-DD HH-MM-SS

直接上函数

convertToCST(datetimeString) {
  const date = new Date(datetimeString);

  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const hours = ('0' + date.getHours()).slice(-2);
  const minutes = ('0' + date.getMinutes()).slice(-2);
  const seconds = ('0' + date.getSeconds()).slice(-2);

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

##用法##

this.convertToCST(fileds.createtime);

注:直接在方案一上替换字符也可!

方案二结果如下:

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值