問題描述
- 我們經常用
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控制臺執行
- 注:又由于IE8上根本不支持
-
分割的日期,所以這里建議用/
分割日期字符串,你也可以不考慮IE8
new Date('2018-11-11 00:00:00'.replace(/-/g, "/"))
在IE瀏覽器控制臺執行
終極方案
- 每次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項目中的配置位置