问题描述

  • 我们经常用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. oracle表的基本操作

    --修改名称rename l_user_info to t_user_info --添加带有约束的表 create table t_user_menu( id number(20) primary k ...

  2. CSS3之3D轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 关于如何使用ehcarts2加载svg矢量地图并自定义县级内部乡镇轮廓

    项目需求:显示县级内部的乡镇一级地图的轮廓! 效果预览: 阻碍因素:echarts不提供县级以下乡镇级轮廓. 解决思路: 1.根据资料查找相关县的行政区域图(百度搜索),如本人所制作的浙江省宁波市宁海 ...

  4. Day74

    Django框架之视图函数(day74)一 作业相关 urlpatterns = [   url(r'^$',views.book),  #根路径,响应到指定视图函数:   .....   url(r ...

  5. Django models中的null和blank的区别

    blank在数据库上存储的是一个空字符串 如需设置字段可以为空:blank=True,默认为blank=False(字段必须填写); null在数据库上表现为NULL,而不是一个空字符串 如需设置字段 ...

  6. Why the Anaconda command prompt is the first choice in windows?

    为什么在windows里,首选的conda命令行工具是Anaconda command prompt? In windows, what's the difference between comman ...

  7. LeetCode 92. Reverse Linked List II倒置链表2 C++

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  8. Exce 快捷键 tips

    1. 填充快捷键 ctrl+R  向下填充 CTRL+D 向右填充 2. 筛选快捷键 CTRL+SHIFT+L 3. 移动到当前区域的边缘: Ctrl + shift + 方向箭头 4. 字符连接:& ...

  9. UGUI 5.0 一些笔记

    1.加载资源路径 在Assets路径里创建Resources文件夹 a.加载配置好的界面 GameObject obj = (GameObject)Resources.Load ("conf ...

  10. javascript判断字符串相等