JSON.stringify()时间date 结果减少了一天

原因:

关于日期对象的时区:JavaScript日期对象在内部以协调世界时(UTC)时间存储,但通常会根据浏览器的时区设置来进行显示,当您的日期对象序列化为JSON时,它将被转换为字符串,通常使用ISO 8601格式,这个过程会导致日期时区信息的丢失

JSON.stringify 在序列化日期对象时,会根据JavaScript日期对象的时区处理方式,默认将日期对象转换为 UTC 时间后进行序列化,而不考虑本地时区,时间对象会被转换为国际标准时间(ISO),而不是当前国家区域的时间

解决方式:

重写Date对象的prototype的toJSON方法,返回自定义时间格式

在vue 获取Angular中页面的生命周期初始化函数(OnInit-Angular、onMounted-Vue)中调用以下方法

Date.prototype.toJSON = function () {
    return this.toLocaleDateString()
 }
 

本次的情况:

背景:Vue 中使用 element-ui 组件DatePicker,组件返回的是中国标准时间

Tue Jan 14 2025 00:00:00 GMT+0800 (中国标准时间)

未做处理使用JSON.stringify序列化时间就少了一天

2025-01-13T16:00:00.000Z

使用以上方式在onMounted中重写Date对象的prototype的toJSON方法

结果:

2025/1/14

和预期想要的格式‘2025-1-14’ 不符合,可以放弃调用Date的内部方法toLocaleDateString() 自定义返回本地时区时间的string格式

 

本次的最终解决方法:

在DatePicker中增加属性 value-format="YYYY-MM-DD" 不需要重写Date对象的prototype的toJSON方法

<el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a Date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />

 

posted @ 2025-01-07 15:18  流年sugar  阅读(125)  评论(0)    收藏  举报