不同浏览器中显式创建Date对象时的格式选择

• 发现问题

  上周解决一个浏览器兼容性bug，记录一下。在IE、Safari和firefox中有一个页面上显示的日期和时间全都变成了1970-01-01 00：00：00，在chrome中的显示却是正常的。 由于页面上的时间是通过服务器端提供的时间日期字符串在前端进行转换后再显示，因此在浏览器控制台进行断点跟踪。最后发现， 转换后的Unix时间戳值在除chrome浏览器之外的几个浏览器中均为NaN。

• 查明原因

  Javascript内置Date对象提供了许多时间日期相关的函数，帮助我们在浏览器端可以非常简便地显示日期时间。

  一般我们使用Date对象是这样:

    var now = new Date(); 
    console.log(now.getTime());//输出unix时间戳,类似这样的结果 1417434189207
  

  或者也可以显式地指定日期时间如下:

    var d = new Date("2014-12-01 17:05:04"); 
    console.log(d.getTime());//在chrome下可以正常输出unix时间戳，但是在其他多款浏览器中输出都是NaN 
  

  Date对象具有多种构造函数:

    new Date()
    new Date(milliseconds)
    new Date(datestring)    //我们主要关注这个构造函数
    new Date(year, month)
    new Date(year, month, day)
    new Date(year, month, day, hours)
    new Date(year, month, day, hours, minutes)
    new Date(year, month, day, hours, minutes, seconds)
    new Date(year, month, day, hours, minutes, seconds, microseconds) 
  

  Date对象的构造函数可以接收一个表示日期的字符串参数来转换为日期。

  日期时间的字符串表示有许多种，如
  yyyy-mm-dd hh:mm:ss
yyyy/mm/dd hh:mm:ss
mm/dd/yyyy hh:mm:ss
...等

  由于浏览器厂商众多，各家对EcmaScript的实现有所区别，所以问题极有可能在于我们传递的时间日期格式无法被除chrome之外的浏览器正确解析成Date对象的一个实例。

• 解决办法

  在尝试了多种时间日期格式之后,最终发现
  yyyy/mm/dd hh:mm:ss
mm/dd/yyyy hh:mm:ss
  这两种格式可以兼容绝大多数浏览器

• 附不同浏览器对DateFormat的兼容性列表

Date Format	IE5-IE8	IE9-IE11	Safari	Chrome	FireFox
yyyy-mm-dd	NaN	valid	NaN	valid	valid
mm/dd/yyyy	valid	valid	valid	valid	valid
yyyy-mm-ddThh:mm:ss	NaN	valid	NaN	valid	valid
yyyy-mm-dd hh:mm:ss	NaN	NaN	NaN	valid	NaN
yyyy/mm/dd hh:mm:ss	valid	valid	valid	valid	valid
mm/dd/yyyy hh:mm:ss	valid	valid	valid	valid	valid

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者李萌授权发布。