• JavaScript new Date()在Safari上的坑


    问题描述

    • 我们经常用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:ssyyyy-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
  • 相关阅读:
    禁止input输入框输入指定内容
    js鼠标按键事件和键盘按键事件用法实例汇总
    JSONP实现跨域
    DedeCMS学习
    原生JS实现瀑布流
    常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
    Ajax学习整理
    Python学习【第三篇】Python变量
    Python学习【第二篇】Python入门
    Python学习【第一篇】Python简介
  • 原文地址:https://www.cnblogs.com/lst619247/p/10735447.html
Copyright © 2020-2023  润新知