问题描述

  • 我们经常用yyyy-MM-dd HH:mm:ss格式表示日期,如2018-11-11 00:00:00,在js开发中也经常会把此格式字符串格式化为javascript Date类型,如new Date('2018-11-11 00:00:00'),不幸的是此操作在Safari浏览器(不论是Mac还是iPhone)上会报错,返回Invalid Date。如下图所示

     
    在Mac Safari控制台执行

解决问题

  • 所以在new Date('yyyy-MM-dd HH:mm:ss')格式化前需要先把字符串转化为Safari支持的格式,可以是yyyy/MM/dd HH:mm:ss或yyyy-MM-ddTHH:mm:ss或其他。看下图
new Date('2018-11-11 00:00:00'.replace(/-/g, "/"))
new Date('2018-11-11 00:00:00'.replace(/ /g,"T"))
在Mac Safari控制台执行
    • new Date('2018-11-11 00:00:00'.replace(/-/g, "/"))

       
      在IE浏览器控制台执行

      终极方案

        • 只是支持Safari不支持,每次new Date需要replace感觉很麻烦,所以这里给出一个终极方案,就是修改全局的Date的默认行为,修改后当调用new Date时会先格式化
           /**
      * 在Safari和IE8上执行 new Date('2017-12-8 11:36:45'); 会得到Invalid Date
      * 本函数重写默认的Date函数,以解决其在Safari,IE8上的bug
      */
      Date = function (Date) {
      MyDate.prototype = Date.prototype;
      return MyDate; function MyDate() {
      // 当只有一个参数并且参数类型是字符串时,把字符串中的-替换为/
      if (arguments.length === 1) {
      let arg = arguments[0];
      if (Object.prototype.toString.call(arg) === '[object String]' && arg.indexOf('T') === -1) {
      arguments[0] = arg.replace(/-/g, "/");
      // console.log(arguments[0]);
      }
      }
      let bind = Function.bind;
      let unbind = bind.bind(bind);
      return new (unbind(Date, null).apply(null, arguments));
      }
      }(Date);
      • 如下图执行修改Date的方法后,正常使用new Date('2018-11-11 00:00:00')将不再报Invalid Date

         
        在Mac Safari控制台执行
      • 注:这段代码应该放在所有new Date操作之前,如html的<head>中,如下图是我在ionic项目中的配置位置

         
         


       

      作者:小军617
      链接:https://www.jianshu.com/p/dc83b45a9480
      来源:简书
      简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

      注:又由于IE8上根本不支持-分割的日期,所以这里建议用/分割日期字符串,你也可以不考虑IE8

JavaScript new Date()在Safari上的坑的更多相关文章

  1. javascript 关于Date 时间类型 处理方法

    上一篇博客中和大家分享了关于 字符串转时间类型 这一篇顺便整理下 javascript 中 Date 类型的一些方法 var time = new Date(); var year=time.getY ...

  2. javascript中Date对象的应用——简易日历的实现

    × 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...

  3. javascript 的Date 格式化, 模仿shell中date命令的格式

    原文:javascript 的Date 格式化, 模仿shell中date命令的格式 shell 中显示当前的日期 [root@localhost]$ date '+%Y-%m-%d %H:%M:%S ...

  4. 《编写可维护的javascript》读书笔记(上)

    最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. ...

  5. javascript中Date对象的应用

    前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 使用type=number的两个input分别作为年和月的输入 ...

  6. JavaScript的Date对象

    整理了一些JavaScript时间的对象,如下所示: toLocaleString()得到当前的年月日和时间的字符串 toLocaleTimeString() 得到当前的时间字符串 toLocaleD ...

  7. Java 和 Javascript 的 Date 与 .Net 的 DateTime 之间的相互转换

    Java 和 Javascript 的 Date 对象内部存放的是从1970年1月1日0点以来的毫秒值. .Net 的 DateTime 对象内部存放的是从0001年1月1日12点以来的tick值,1 ...

  8. 解决iphone safari上的圆角问题

    -webkit-appearance : none ; /*解决iphone safari上的圆角问题*/

  9. json里的日期字符串 怎么 转换成 javascript 的 Date 对象?

    “/Date(1232035200000)/” 怎么转换成  javascript 的 Date 对象 做法:new Date(+/\d+/.exec(value)[1]); value就是json字 ...

随机推荐

  1. java.lang.Byte 类源码浅析

    Byte 类字节,属于Number. public final class Byte extends Number implements Comparable<Byte> { /** * ...

  2. Jq写个联级菜单

    这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...

  3. 在Spring Boot中使用 @ConfigurationProperties 注解

    但 Spring Boot 提供了另一种方式 ,能够根据类型校验和管理application中的bean. 这里会介绍如何使用@ConfigurationProperties.继续使用mail做例子. ...

  4. IE高级配置中,存在SSL支持协议,例如SSL TLS。

    IE高级配置中,存在SSL支持协议,例如SSL TLS. 其在注册表的路径为:HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\I ...

  5. [python,2018-06-29] 37%法则及其拓展解决恋爱问题

    37%法则 苏格拉底的问题: 在一片麦田里摘出一颗最大最好的麦穗.但只能摘一次,而且不能回头. 传说这是苏格拉底给他的弟子柏拉图提出的问题,又传说柏拉图进行了2次选择: 1.柏拉图第一次走进麦田,他发 ...

  6. jQuery获取各种位置方法

    一.获取窗口的宽高 1.获取流览器显示区域的高度 : $(window).height(); 2.获取流览器显示区域的宽度 : $(window).width(); 3.获取文档流的高度 : $(do ...

  7. vue与dajngo

    怎么说,网上找的例子真的不是一般的坑,根本就是少了很多流程让人故意看不懂 第一步,创建好我们的app django-admin startproject weeklyapp 这是创建我们的整个系统ap ...

  8. 微信授权获取用户openId等信息

    在我们开发小程序的时候,需要通过授权获取用户的信息. 第一种使用wx.getUserInfo直接获取微信头像,昵称 // 必须是在用户已经授权的情况下调用 wx.getUserInfo({ succe ...

  9. Jmeter之数据库性能测试

    公司的**产品急待上线,但查询订单操作响应很慢,为了准确定位问题,特对几个大数据查询语句进行性能测试. 环境介绍:数据库用的MYSQL,采用分布式布置,本次单压测一台数据库服务器,查询待支付订单.待消 ...

  10. Packet Tracer路由器简单配置

    路由器Router2:Router>enable 进入特权模式Router#configure terminal 进入全局配置模式Router(config)#hostname RA 将路由器名 ...