【前端踩坑记】Safari 浏览器不支持 YYYY-MM-DD HH:mm:ss 日期格式的问题 Invalid Date

3,385 阅读2分钟

近期做Web端开发的时候,发现了一个问题,Safari浏览器中时间选择控件无法正确获取时间。

刚开始怀疑是ElementUI中时间选择控件的bug,后来发现我误会ElementUI了(对不起,哥我错了,你是最好用的Web组件库)。

[招商银行:您尾号2333的银行卡入账0.5元,备注:推广费]

后来怀疑是moment.js的问题moment.js可是国际驰名品牌,难道它竟然有这么大的bug?后来查了资料发现,不是 moment.js 的问题,是浏览器兼容问题(对不起,哥我错了,你是最好用的JS时间转换库)

[ 招商银行:您尾号2333的银行卡入账0.5元,备注:推广费 ]

到底是啥情况呢?为啥Chrome没事呢?打开Chrome控制台试了一下:

Chrome老铁没毛病,都正确。换Safari试一下:

What the f**k ???这么标准的时间格式怎么就不对了?

事实证明我确实是个只会写Android的菜比。。。。2020-05-21 12:00:00 这个时间格式真的标准么?答案是不标准!认知决定思维,写Android写多了,真的会认为这个格式是国际标准格式。实际上它真不是。

那国际标准格式到底是啥呢?

ECMA-262 标准中将日期格式规定为 YYYY-MM-DDTHH:mm:ss.sssZ ,如下图所示: www.ecma-international.org/ecma-262/9.…

其中,T 标识时间开始,Z 为相对于UTC(国际协调时间 - International Atomic Time)的时间偏移量,可为 Z, +HH:mm 或 -HH:mm。我们在东八区,所以写+08:00即可。

所以这里对于Safari浏览器,对于2020年5月21日中午12点,我们这么写:

new Date('2020-05-21T12:00:00+08:00')

到Safari控制台中执行一下:

终于没毛病了!继续搬砖去了~~~

额外的话:为啥Chrome支持yyyy-MM-DD的格式,Safari就是不支持呢?支持一下又不会怀孕?这里Safari并没有做错什么,因为人家支持国际标准格式啊,yyyy-MM-DD 这种Android菜比才会用的时间格式人家没有义务兼容

好吧,这次真的是君乐宝涨芝士了!

[ 招商银行:您尾号2333的银行卡入账0.5元,备注:推广费 ]