0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Windows Android iOS で問題を問題を起こさないDateの引数

Last updated at Posted at 2019-08-09

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判定はこちらを参考にさせて頂きました。

Javascript date is invalid on iOS

iOSで動作するDateのコンストラクタ引数はこちらを参考にさせて頂きました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?