START
- 最近遇到很多次
2022-03-29T12:30:53.580Z
,这种带有字母T
和字母Z
的时间字符串。 - 遇到次数多了,逐渐引起我的好奇心,随即研究一下,写此文记录一下,所了解的内容。
这种时间格式怎么来的?
结论
暂时发现两个方法可以生成这种格式的时间字符串
new Date().toISOString() // '2022-03-29T12:47:13.645Z'
new Date().toJSON() // '2022-03-29T12:47:35.036Z'
Date.prototype.toISOString()
MDN官网解释:返回一个 ISO 格式的字符串:YYYY-MM-DDTHH:mm:ss.sssZ
。时区总是UTC(协调世界时),加一个后缀“Z”标识。
Date.prototype.toJSON()
MDN官网解释: toJSON()
方法返回 Date 对象的字符串形式
随即衍生出来的问题:
-
什么是 ISO 格式的字符串?
ISO 8601
:国际标准化组织的国际标准ISO 8601是日期和时间的表示方法可参考:https://baike.baidu.com/item/ISO%208601/3910715?fr=aladdin
-
什么是协调世界时?
字母T和字母Z是什么含义
字母T
分隔符,指示时间元素的开始
字母sss
毫秒数
字母Z
后面可能会跟 -
或者+
以及 hh:ss
时区偏差的时间
详细图解

是否影响我们使用?
在element-ui
中使用
- 无影响,展示的话设置一个
format
value-format
分别处理展示格式
和值格式
即可
代码
<template>
<div class="#app">
<div>
<h2>el-date-picker</h2>
<el-date-picker
v-model="value"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择时间"
>
</el-date-picker>
</div>
<div>
<h2>时间的值</h2>
{{ value }}
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "",
};
},
created() {
// 1.设置默认值
this.value = new Date().toISOString();
console.log(this.value)
},
};
</script>
运行截图

手动格式化这个时间?
正则处理一下即可字符串 补充一下时差即可
// `8 * 3600 * 1000 补充时差` 北京东八区所以补八个小时
new Date(+new Date(`需要格式的时间`) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
// 使用案例
var time=new Date().toISOString() // 2022-03-29T15:51:27.073Z
new Date(+new Date(time) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') // '2022-03-29 23:51:27'
举一反三 其他格式的时间
// 默认的
new Date() // Wed Mar 30 2022 00:46:02 GMT+0800 (中国标准时间)
// GMT格式
new Date().toGMTString() // 'Tue, 29 Mar 2022 16:24:09 GMT'
// ISO格式
new Date().toISOString() // '2022-03-29T16:47:26.681Z'
new Date().toDateString() // 'Wed Mar 30 2022'
END
- 简单总结呢,就是时间的不同展示格式。
网友评论