Help us understand the problem. What is going on with this article?

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

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側で問題が発生しなかった。(確認ヌル目です。ツッコミ歓迎。)

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のコンストラクタ引数はこちらを参考にさせて頂きました。

brnakina
仕事でWebシステム開発やってます。 PHP、MySQL、Javascriptあたりが好きです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした