问题描述

  • 我们经常用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. 通过JS 给这个input加一个事件 获得焦点，回车事件绑定

    通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...

  2. django框架使用mysql报错,及两种解决方法

    1.django框架 settings.py文件中部分代码: DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3' ...

  3. Android 开发 上拉加载更多功能实现

    实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...

  4. [持续交付实践] 研发协作平台：DevOps背景下的组织结构

    前言 今年以来做的事情越来越杂,负责的技术方向越来越广,精力越来越分散(创业公司的典型特点),编码的时间越来越少,有时候也会觉得很疲惫没办法专注一个事情. 除了技术方向上的实践,组织上如何组建一个最优 ...

  5. 【python】Django自定义模板函数

    参考:https://blog.csdn.net/wenyuanhai/article/details/73656761 注意: 1.自定义模板函数的路径必须为APP的templatetags下:ap ...

  6. spring boot 集成disconf

    1.spring boot配置disconf需要在启动类上配置读取xml的入口注解:@ImportResource({"classpath:spring-disconf.xml"} ...

  7. 使用Webupload上传图片到FastDFS分布式文件系统

    使用Webupload插件上传图片到FastDFS分布式文件系统. 前提条件:1.已安装FastDFS分布式文件系统 2.使用webuploader插件上传文件 3.maven工程已引入FastDFS ...

  8. mysql 5.5数据导入5.7 Failed - Error on Table user - 1067 - Invalid default value for 'CREATE_date'

    表结构是这样 DROP TABLE IF EXISTS `user`;CREATE TABLE `user` (....省略了一些无关紧要的字段 `CREATE_DATE_` timestamp NO ...

  9. [UNITY 5.4 UGUI] 控件重叠触摸穿透

    问题. imge 和 button重叠时,imge 覆盖在button上面,导致点击事件无法传递到button. 1.给imge 添加 [Canvas Group]组件 2.修改[Canvas Gro ...

  10. JMETER之socket接口性能测试

    公司的**产品经过换代升级,终于要上线了,纯java编码,包括POS(PC/安卓平板)版.WEB版.微信版,各终端通过 Webservice服务共享数据资源,因此Webservice各接口的性能测试就 ...