new Date(文字列)の機種依存の問題
MySQLからそのままJSONで出力した日付文字列(例:2019-08-09 14:53:10)はJavascript上でそのままDateのコンストラクタに渡せません。
文字列 | IE11 | Edge | Chrome | FF | iOS |
---|---|---|---|---|---|
2019-08-09 15:00:00 | × | 〇 | 〇 | 〇 | × |
2019/08/09 15:00:00 | 〇 | 〇 | 〇 | 〇 | × |
2019-08-09T15:00:00+09:00 | × | × | 〇 | 〇 | 〇 |
※FF(FireFox)はWindows上で確認
※ChromeはWindows,Android,iOSで確認
※iOSの確認はiPhoneXSのみ。
対策
iOSを判断して出力内容を分ける。
windows、及びAndroid上ではelse側で問題が発生しなかった。(確認ヌル目です。ツッコミ歓迎。)
※下記の例は与えられるdateStringがMySQLのDatetime型をそのままJSON化した形(例:2020-10-01 19:42:35)を想定しております。
const dateStringConverter = (dateString) => {
if(/iP(hone|(o|a)d)/.test(navigator.userAgent)){
const timezoneOffset = new Date().getTimezoneOffset();
const sign = timezoneOffset >= 0 ? "-" : "+";
const hour = Math.floor(Math.abs(timezoneOffset) / 60);
const minute = timezoneOffset % 60;
const timeDifference = `${sign}${("00"+hour).slice(-2)}:${("00"+minute).slice(-2)}`;
return dateString.replace(" ", "T") + timeDifference ;
} else {
return dateString.replace(/-/g,"/");
}
};
const date = new Date(dateStringConverter (dateString));
こうしておけば目立った問題は解消しました。
+9:00部分はUTCに対するJSTとの差なので上記は日本国内でのみ正常に動作します。
タイムゾーン設定には注意が必要かもしれません。
参考
iOS判定はこちらを参考にさせて頂きました。
iOSで動作するDateのコンストラクタ引数はこちらを参考にさせて頂きました。