资讯专栏INFORMATION COLUMN

Date对象的浏览器兼容性问题

My_Oh_My / 2304人阅读

摘要:介绍一个能够解决对象的浏览器兼容问题的简单方法。方法在浏览器中的兼容性问题在不同浏览器中对于传入的时间字符串的格式要求是不一样的。下面在浏览器中输入相同内容,查看对应结果可以发现,仅对分割日期的形式支持,对分割日期的形式并不支持。

介绍一个能够解决Date对象的浏览器兼容问题的简单方法。

new Date()、Date.parse()方法在浏览器中的兼容性问题

Date在不同浏览器中对于传入的时间字符串的格式要求是不一样的。比如在chrome浏览器的控制台中输入以下内容,会得到相应结果:

Date.parse("2015-11-11 00:00:00")
//->1447171200000
Date.parse("2015/11/11 00:00:00")
//->1447171200000
new Date("2015-11-11 00:00:00")
//->Wed Nov 11 2015 00:00:00 GMT+0800 (CST)
new Date("2015/11/11 00:00:00")
//->Wed Nov 11 2015 00:00:00 GMT+0800 (CST)

可以发现,chrome对于"-"和"/"分割日期的形式都是支持的,能够返回正确的毫秒数或者时间格式。

下面在safari浏览器中输入相同内容,查看对应结果:

> Date.parse("2015-11-11 00:00:00")
< NaN = $1
> Date.parse("2015/11/11 00:00:00")
< 1447171200000 = $2
> new Date("2015-11-11 00:00:00")
< Invalid Date = $3
> new Date("2015/11/11 00:00:00")
< Wed Nov 11 2015 00:00:00 GMT+0800 (CST) = $4

可以发现,safari仅对"/"分割日期的形式支持,对"-"分割日期的形式并不支持。

通过以上实验,我们可以观察出chrome和safari对于不同格式的时间字符串的支持情况。chrome同时支持"-"和"/"分割日期的时间字符串;safari不支持"-"分割日期的时间字符串。

一个简单有效的解决方法

下面是一个比较好的解决方案:

var arr = "2010-03-15 10:30:00".split(/[- / :]/),
    date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
  
  console.log(date);
  //-> Mon Mar 15 2010 10:30:00 GMT+0000 (GMT Standard Time)

该方法为先将时间字符串用split方法进行分割拼装为一个数组,再将每个数组的项作为传参传入new Date()方法,从而将不同形式的字符串转换成有效的时间。
该方法对于所有浏览器生效。

博客文章地址:http://joebon.cc/date-cross-browser-safari-chrome

参考资料:

http://stackoverflow.com/questions/5324178/javascript-date-parsing-on-iphone

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79471.html

相关文章

  • #JavaScript# IE兼容

    摘要:出现原因在子页面关闭时,会释放掉在子页面中声明赋值的对象。所以在父页面所有对这个对象的引用操作都会产生这个错误。然后在父页面中使用变成对象。 在IE浏览器中出现的问题 1.不能执行已释放 Script 的代码 1.bug出现背景:在使用iframe标签时,如果子页面向父页面传递在子页面创建的对象(所有对象,包括数组,函数,正则等)时,会出现这个bug。 2.bug出现原因: 在子页面关...

    Me_Kun 评论0 收藏0
  • JavaScript 优雅实现方式包含你可能不知道知识点

    摘要:优点简单粗暴,直接调用缺点兼容性不太好,不过的话都支持你可能不知道的前端知识点对象和的方法。下面从深层次剖析一下对于开始的两个赋值语句,,,相当于,而显然等于。同理可以分析第三个赋值语句 有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。 实现一个目的有多种途径,俗话说,条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论,收集整理拓展一波,发...

    617035918 评论0 收藏0
  • JavaScript 优雅实现方式包含你可能不知道知识点

    摘要:优点简单粗暴,直接调用缺点兼容性不太好,不过的话都支持你可能不知道的前端知识点对象和的方法。下面从深层次剖析一下对于开始的两个赋值语句,,,相当于,而显然等于。同理可以分析第三个赋值语句 有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。 实现一个目的有多种途径,俗话说,条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论,收集整理拓展一波,发...

    Zhuxy 评论0 收藏0
  • JavaScript 优雅实现方式包含你可能不知道知识点

    摘要:优点简单粗暴,直接调用缺点兼容性不太好,不过的话都支持你可能不知道的前端知识点对象和的方法。下面从深层次剖析一下对于开始的两个赋值语句,,,相当于,而显然等于。同理可以分析第三个赋值语句 有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。 实现一个目的有多种途径,俗话说,条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论,收集整理拓展一波,发...

    KaltZK 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<