JS中new Date()的浏览器兼容性问题

1 问题分析

今天收到测试部的一个JIRA，如下：

经分析，原因如下：

let params = '2020-10-15 15:20:00'
date = new Date(params)

其中的params = '2020-10-15 15:20:00'格式，是无法在各个浏览器中通过new Date(params)来正确生成日期（Date）对象的，该javascript的脚本在Chrome下是可以正确执行的，但是在其他浏览器下会报出错误显示为NaN。

即：date格式为“yyyy-mm-dd”的代码，在Chrome能被进行正确的转换，但在IE或Firefox则不支持，所以为了兼容其他浏览器，应该先将日期格式转换为“yyyy/mm/dd”

2 解决方法

可以对该日期格式进行转换，基于 ‘/’ 格式的日期字符串，才是被各个浏览器所广泛支持的，‘-’连接的日期字符串，则是只在chrome下可以正常工作，如下：

let params = '2020-10-15 15:20:00'
params= params.replace(/-/g,"/")      // '2020/10/15 15:20:00'
date = new Date(Date.parse(params))

3 new Date()兼容性问题小结

兼容结果汇总如下:

3.1 无参：所以浏览器都兼容

3.2 有参

3.2.1 参数格式——日期 “yyyy-MM-dd”

• IE：> IE9-（不兼容）　；> IE9+（兼容，包含IE9）
• Mozilla Firefox（兼容）
• Chrome（兼容）

3.2.2 参数格式——日期时间“yyyy-MM-dd HH:mm:ss”

• IE （不兼容，不管哪个版本）
• Mozilla Firefox（不兼容）
• Chrome（兼容）

3.2.3 参数格式——日期时间“yyyy/MM/dd HH:mm:ss”

• IE9+ （兼容）
• Mozilla Firefox（兼容）
• Chrome（兼容）

4 new Date() 日期格式处理

4.1 常用操作

var myDate = new Date();   //Thu Oct 15 2020 15:54:28 GMT+0800 (中国标准时间)
myDate.getYear(); //获取当前年份(2位) 
myDate.getFullYear(); //获取完整的年份(4位,1970-????) 
myDate.getMonth(); //获取当前月份(0-11,0代表1月)，所以获取当前月份是myDate.getMonth()+1;  
myDate.getDate(); //获取当前日(1-31) 
myDate.getDay(); //获取当前星期X(0-6,0代表星期天) 
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 
myDate.getHours(); //获取当前小时数(0-23) 
myDate.getMinutes(); //获取当前分钟数(0-59) 
myDate.getSeconds(); //获取当前秒数(0-59) 
myDate.getMilliseconds(); //获取当前毫秒数(0-999) 
myDate.toLocaleDateString(); //获取当前日期 
var mytime=myDate.toLocaleTimeString(); //获取当前时间 
myDate.toLocaleString( ); //获取日期与时间 

4.2 JS获取当前时间戳的方法

var timestamp =Date.parse(new Date());    结果：1602748024000    //不推荐; 毫秒改成了000显示 
var timestamp =(new Date()).valueOf();    结果：1602748027051       //推荐;  
var timestamp=new Date().getTime();     结果：1602748037574        //推荐;  

4.3 将字符串形式的日期转换成日期对象

var strTime="2020-04-16";    //字符串日期格式            
var date= new Date(Date.parse(strTime.replace(/-/g,  "/")));      //转换成Data(); 

4.4 new Date() 的参数

new Date() ;     //参数可以为整数; 也可以为字符串; 但格式必须正确 
new Date(2020,1,1);       //正确 
new Date("2020/1/1");    //正确 
new Date("2020-1-1");    //错误 
new Date( year, month, date, hrs, min, sec)  按给定的参数创建一日期对象

参数说明：

• year的值为：1999年之前的需设定的年份-1900。例如需设定的年份是1997则year的值应为97，即1997-1900的结果。所以Date中可设定的年份最小为1900；超过1999年的直接输入年份即可
• month的值域为0～11，0代表1月，11表代表12月；
• date的值域在1～31之间；
• hrs的值域在0～23之间。从午夜到次日凌晨1点间hrs=0，从中午到下午1点间hrs=12；
• min和sec的值域在0～59之间。

例

new Date(0,10,15)  // Thu Nov 15 1900 00:00:00 GMT+0805 (中国标准时间) 解释：周四 11月15号 1900年
new Date(97,9,15)  // Wed Oct 15 1997 00:00:00 GMT+0800 (中国标准时间) 解释：周三10月15号1997年
new Date(2020,9,15) // Thu Oct 15 2020 00:00:00 GMT+0800 (中国标准时间)  解释：周四10月15号2020年

注意：有的结果不正确，如设定时间为1910年2月30日，它将被解释成3月2日，why？？？

new Date(10,1,30,10,12,34)  // Wed Mar 02 1910 10:12:34 GMT+0800 (中国标准时间)

4.5 日期格式转为日期标准字符串

4.5.1 2020-09-15

formatDate(date) { 
  	var y = date.getFullYear(); 
    var m = date.getMonth() + 1; 
    m = m < 10 ? '0' + m : m; 
    var d = date.getDate(); 
    d = d < 10 ? ('0' + d) : d 
    // return y + '-' + m + '-' + d; 
    console.log(y + '-' + m + '-' + d)
}
formatDate(new Date())    // 2020-10-15
formatDate(new Date(2020,0,1))   // 2020-01-01

4.5.2 2020-09-15 13:29:30

function (date) { 
	  var y = date.getFullYear(); 
	  var m = date.getMonth() + 1; 
	  m = m < 10 ? ('0' + m) : m; 
	  var d = date.getDate(); 
	  d = d < 10 ? ('0' + d) : d; 
	  var h = date.getHours(); 
	  h=h < 10 ? ('0' + h) : h; 
	  var minute = date.getMinutes(); 
	  minute = minute < 10 ? ('0' + minute) : minute; 
	  var second=date.getSeconds(); 
	  second=second < 10 ? ('0' + second) : second; 
	  return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second; 
}

4.5.3 时间格式字符串转为时间戳（毫秒）

let str='2020-01-01 17:22:37';
let date=new Date(str.replace(/-/g, '/'));  // ‘2020/01/01 17:22:37’
let res=date.getTime();