Date()日期函數瀏覽器兼容問題踩坑

時間 2019-12-08

標籤 date 日期函數瀏覽器兼容問題欄目瀏覽器简体版

原文原文鏈接

以前用layui作的一項目中，table中用到了日期格式化的問題。直接沒多想，擼代碼就完了唄，結果最近一段時間客戶反饋說顯示日期跟錄入日期不同（顯示日期比錄入日期多8個小時）。javascript

當時腦子裏想的就是：「握草，這怎麼可能」。而後就溝通駐場同事排查問題。java

當時的腦回路是這樣的：數據庫

一、差8個小時——時區不對？瀏覽器

二、電腦設置有問題？安全

三、代碼有問題？函數

通過排查，只有一個片區的用戶有反饋日期顯示不正確。測試

而後就開始排查瀏覽器，用的數字安全瀏覽器急速模式，那就是Chrome內核啊，而後就從本地再測，神奇的一幕又發生了，我本地是沒問題的，然之後讓現場同事測試，也是沒問題的。可是就是用戶電腦上不行。ui

因而開啓了問題解決之路：調整代碼！3d

原來代碼是這樣的：調試

通過調試發現，這個代碼在Mozilla Firefox跟Chrome中是沒問題的。可是在IE以及部分低版本的Chrome中是存在問題的。

根據上面的代碼，在不兼容的狀況下，出問題的代碼就是這一句：

好了，知道問題所在，開始動刀

傳入的時間格式時這樣的：2019-03-07T12:23:45，通過查閱資料才知道，

new Date(「2019-03-07T12:23:45」)；是存在兼容性問題的。

兼容結果彙總以下：

一、無參：因此瀏覽器都兼容

二、有參：

1) 參數格式一日期「yyyy-MM-dd」：

　　> IE9-（不兼容）　

　　> IE9+（兼容，包含IE9）

Mozilla Firefox（兼容）

Chrome（兼容）

2)參數格式二

日期時間「yyyy-MM-dd HH:mm:ss」：

IE （不兼容，無論哪一個版本）

Mozilla Firefox（不兼容）

Chrome（兼容）

日期時間「yyyy/MM/dd HH:mm:ss」

IE9+ （兼容）

Mozilla Firefox（兼容）

Chrome（兼容）

因而乎代碼就改爲這樣子：

懶人看這：

//格式化時間 yyyy-mm-dd HH:MM:ss
    function FormatDateTime(v) {
        if (!v) {
            return "";
        }
         if(typeof v === 'string' && (v.indexOf('T') > -1||v.includes('T'))) {
            v = v.replace('T', ' ').replace(/\-/g, '/'); //注意：指定一個具體的時間轉換時間戳，須要yyyy/mm/dd hh:ii:ss格式，yyyy-mm-dd在IE和Safari下是有問題的。
        };
        console.log("數據庫時間："+v);
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? ("0" + d) : d;
        var h = date.getHours();
        h = h < 10 ? ("0" + h) : h;
        var M = date.getMinutes();
        M = M < 10 ? ("0" + M) : M;
        var str = y + "-" + m + "-" + d + " " + h + ":" + M;
        console.log("原來時間:"+str);
        return str;
       

    }

最後貼個封裝的JS日期格式化函數：

/** 
 * 時間戳格式化函數 
 * @param  {string} format    格式 
 * @param  {int}    timestamp 要格式化的時間 默認爲當前時間 
 * @return {string}           格式化的時間字符串 
 */
function date(format, timestamp){  
    var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date()); 
    var pad = function(n, c){ 
        if((n = n + "").length < c){ 
            return new Array(++c - n.length).join("0") + n; 
        } else { 
            return n; 
        } 
    }; 
    var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 
    var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"}; 
    var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];  
    var f = { 
        // Day 
        d: function(){return pad(f.j(), 2)}, 
        D: function(){return f.l().substr(0,3)}, 
        j: function(){return jsdate.getDate()}, 
        l: function(){return txt_weekdays[f.w()]}, 
        N: function(){return f.w() + 1}, 
        S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'}, 
        w: function(){return jsdate.getDay()}, 
        z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0}, 
        
        // Week 
        W: function(){ 
            var a = f.z(), b = 364 + f.L() - a; 
            var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1; 
            if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){ 
                return 1; 
            } else{ 
                if(a <= 2 && nd >= 4 && a >= (6 - nd)){ 
                    nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31"); 
                    return date("W", Math.round(nd2.getTime()/1000)); 
                } else{ 
                    return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0); 
                } 
            } 
        }, 
        
        // Month 
        F: function(){return txt_months[f.n()]}, 
        m: function(){return pad(f.n(), 2)}, 
        M: function(){return f.F().substr(0,3)}, 
        n: function(){return jsdate.getMonth() + 1}, 
        t: function(){ 
            var n; 
            if( (n = jsdate.getMonth() + 1) == 2 ){ 
                return 28 + f.L(); 
            } else{ 
                if( n & 1 && n < 8 || !(n & 1) && n > 7 ){ 
                    return 31; 
                } else{ 
                    return 30; 
                } 
            } 
        }, 
        
        // Year 
        L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0}, 
        //o not supported yet 
        Y: function(){return jsdate.getFullYear()}, 
        y: function(){return (jsdate.getFullYear() + "").slice(2)}, 
        
        // Time 
        a: function(){return jsdate.getHours() > 11 ? "pm" : "am"}, 
        A: function(){return f.a().toUpperCase()}, 
        B: function(){ 
            // peter paul koch: 
            var off = (jsdate.getTimezoneOffset() + 60)*60; 
            var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off; 
            var beat = Math.floor(theSeconds/86.4); 
            if (beat > 1000) beat -= 1000; 
            if (beat < 0) beat += 1000; 
            if ((String(beat)).length == 1) beat = "00"+beat; 
            if ((String(beat)).length == 2) beat = "0"+beat; 
            return beat; 
        }, 
        g: function(){return jsdate.getHours() % 12 || 12}, 
        G: function(){return jsdate.getHours()}, 
        h: function(){return pad(f.g(), 2)}, 
        H: function(){return pad(jsdate.getHours(), 2)}, 
        i: function(){return pad(jsdate.getMinutes(), 2)}, 
        s: function(){return pad(jsdate.getSeconds(), 2)}, 
        //u not supported yet 
        
        // Timezone 
        //e not supported yet 
        //I not supported yet 
        O: function(){ 
            var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4); 
            if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t; 
            return t; 
        }, 
        P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))}, 
        //T not supported yet 
        //Z not supported yet 
        
        // Full Date/Time 
        c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()}, 
        //r not supported yet 
        U: function(){return Math.round(jsdate.getTime()/1000)} 
    }; 
        
    return format.replace(/[\]?([a-zA-Z])/g, function(t, s){ 
        if( t!=s ){ 
            // escaped 
            ret = s; 
        } else if( f[s] ){ 
            // a date function exists 
            ret = f[s](); 
        } else{ 
            // nothing special 
            ret = s; 
        } 
        return ret; 
    }); 
}