问题描述

  • 我们经常用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. mybatis入门篇：代码生成器（MyBatis Generator）

    这篇文章只是按照自己的需要去配置代码生成器,未对所有配置进行讲解,需要了解具体详情的,请到官网查阅文档.传送门:http://www.mybatis.org/generator/ 1.首先引入相关的依 ...

  2. python 给定数组任意组合等于一个定值的所有解

    抛出问题: 求给定数组任意组合等于一个定值的所有解 例如列表l = [1, 2, 3, 4, 5],求任意组合的结果为10的所有答案 问题分析: 实际就是列表的所有排列组合,然后算出每个排列组合的值, ...

  3. Android 开发 图片网络缓存加载框架Fresco

    简介 Fresco是一个在Android应用程序中显示图像的强大系统. Fresco负责图像的加载和显示.它将从网络.本地存储或本地资源加载图像,图像加载完成前会显示一个占位图片.它有两个级别的缓存: ...

  4. Jacey：烧了500万才知道，信息流广告OCPC竟然要这样玩！心疼

    现在很多线索类广告主,已经不满足于表单.在线咨询等获客方式,随着微商的火热,很多行业都玩起了个人微信号加粉的方式来获取潜在消费者. 随着手机的普遍,移动流量呈大幅上涨趋势,越来越多广告主将目光投向了信 ...

  5. SAML 2.0初始

    一.背景知识: SAML即安全断言标记语言,英文全称是Security Assertion Markup Language.它是一个基于XML的标准,用于在不同的安全域(security domain ...

  6. php把网络图片转Base64编码。

    /** 把网络图片图片转成base64 * @param string $img 图片地址 * @return string */ /*网络图片转为base64编码*/ function imgtob ...

  7. 36_react_ui_antd

    1:最流行的开源react ui组件库 1.1:material-ui(国外) 1.2:ant-design(推荐:国内蚂蚁金服) 2.如何使用 方式一(页面引入): 在<head>标签内 ...

  8. javaSE基础知识

    JVM,JRE,JDK三者的简单总结 1.见名解释 Java虚拟机(JVM):Java virtual machine简称JVM:“virtual”中文意思“虚拟的”,“machine”中文意思“机器 ...

  9. MySQL 登陆

    #==========================登陆mysql ============================================ # 登陆用户名:-u,登陆IP: -h, ...

  10. Python连接Access数据库遇到问题'ADODB.Connection', '未找到提供程序。该程序可能未正确安装。'的处理办法

    环境Windows7+python3.6.4 x64位+AccessDatabaseEngine_X64.exe,执行代码: import win32com.client conn = win32co ...