【兼容封装】解决js new Date()的浏览器兼容性问题,IE、safari中值为Invalid Date的问题

解决safari中IOS 8601标准

问题描述:

开发中需要写一个倒计时,但是时间周期是根据后端传过来的开始时间和结束时间进行计算的,后端传过来的字符串日期格式为:2017-11-12 22:11:22,在前端中我们使用 new Date()来将其转为date对象,一切进行顺利,在各个浏览器都没问题,但是safari中却出现了“Invalid Date”的异常信息

解决:
一开始以为是Date()构造函数的问题,立马采用静态方法,Date.parse()–未解决

然后想到了是字符串日期的格式问题,查阅相关es6标准文档,其中指出字符串日期格式必须符合ISO 8601标准,标准为:YYYY-MM-DDTHH:mm:ss.sssZ,如"2017-09-30T09:00:00"同时文档也指出了各个段位的含义,以及在缺失状况的处理,那么问题来了,明显字符串日期的格式不符合这个标准,但是为什么其他浏览器却可以正确显示,个人猜测:其他浏览器厂商对这种字符串转日期在标准的基础上做了这种格式的扩展,然后safari并没有,其实我们无需具体了解各个浏览器厂商到底对这个格式做了什么扩展,我们统统都转为标准的格式,这样就能很好的解决各个浏览器的问题了;

1.如果只是小面积的使用 可以使用正则进行替换:

    dateStr.replace(/\s/g,'T').replace(/\//g,'-');

2.或者写一个UTC转ISO 8601的方法

function ISODateString(d) {
    function pad(n){
        return n<10 ? '0'+n : n
    }
    return d.getUTCFullYear()+'-'
    + pad(d.getUTCMonth()+1)+'-'
    + pad(d.getUTCDate())+'T'
    + pad(d.getUTCHours())+':'
    + pad(d.getUTCMinutes())+':'
    + pad(d.getUTCSeconds())+'Z'
}

    var today = new Date();
    console.log(ISODateString(today));

3.如果大面积的使用,建议使用date.js进行处理,或者认为可以的其他第三方库

大多数浏览器兼容的日期格式

1.当然如果输入所有浏览器都通用的格式,这些也是不会报错的,如2017-11-12 22:11:22这种格式在chrome、FF返回的正确的结果,所以不同的浏览器还是存在差异的,以下列出了所有浏览器都支持的方式。

new Date(2011, 01, 07); // yyyy, mm-1, dd  
new Date(2011, 01, 07, 11, 05, 00); // yyyy, mm-1, dd, hh, mm, ss  
new Date("02/07/2011"); // "mm/dd/yyyy"  
new Date("02/07/2011 11:05:00"); // "mm/dd/yyyy hh:mm:ss"  
new Date(1297076700000); // milliseconds  
new Date("Mon Feb 07 2011 11:05:00 GMT"); // ""Day Mon dd yyyy hh:mm:ss GMT/UTC

从服务器取回的数据是:

    dateStr = "02-07-2011 11:05:00"

如果返回的格式不需要符合【ISO 8601标准】的话,解决办法:就直接将 - 替换为 / ,斜杠通用于所有斜杠

    dateStr = dateStr .replace(/-/g,"/");
    let date = new Date(dateStr );
结语

如有错误,欢迎指正

参考资料:
https://blog.csdn.net/sinat_31257007/article/details/49208789

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值