之前用layui做的一項目中,table中用到了日期格式化的問題。直接沒多想,擼代碼就完了唄,結果最近一段時間客戶反饋說顯示日期跟錄入日期不一樣(顯示日期比錄入日期多8個小時)。
當時腦子里想的就是:“握草,這怎么可能”。然后就溝通駐場同事排查問題。
當時的腦回路是這樣的:
1、差8個小時——時區不對?
2、電腦設置有問題?
3、代碼有問題?
經過排查,只有一個片區的用戶有反饋日期顯示不正確。
然后就開始排查瀏覽器,用的數字安全瀏覽器急速模式,那就是Chrome內核啊,然后就從本地再測,神奇的一幕又發生了,我本地是沒問題的,然以后讓現場同事測試,也是沒問題的。但是就是用戶電腦上不行。
於是開啟了問題解決之路:調整代碼!
原來代碼是這樣的:

經過調試發現,這個代碼在Mozilla Firefox跟Chrome中是沒問題的。但是在IE以及部分低版本的Chrome中是存在問題的。
根據上面的代碼,在不兼容的情況下,出問題的代碼就是這一句:

好了,知道問題所在,開始動刀
傳入的時間格式時這樣的:2019-03-07T12:23:45,經過查閱資料才知道,
new Date(“2019-03-07T12:23:45”);是存在兼容性問題的。
兼容結果匯總如下:
1、無參:所以瀏覽器都兼容

2、有參:
1) 參數格式一日期“yyyy-MM-dd”:
IE
> 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;
});
}
