Author

中村＠アールテクニカ

アールテクニカの中村です。
先日担当した案件で、JavaScriptのDateオブジェクトを使用するコードを書きましたが、Chromeでは正常に動作しているのにSafariでは正常に動作しないという現象が発生しました。
何が原因だったのか、どう対応すればいいのか解説したいと思います。

APIから取得したデータに、2016-09-30T12:34:56という形式と、2016/09/30T12:34:56という形式が混在していたため、最初は、タイムゾーンを付加して2016-09-30 12:34:56+09:00という形式に変換してDateオブジェクトの初期化引数としていたのですが、この実装ではChromeでは正常に動作していましたが、Safariでは日付がデコードできていませんでした。
そこで、2016-09-30T12:34:56+09:00にしたところ両方の環境で正常動作するようになりました。

2016-09-30T12:34:56+09:00は、ISO 8601の拡張形式と言う正式に規格化された日付書式ですが、2016-09-30 12:34:56+09:00は正式な規格に沿った書式ではなくブラウザによって対応状況が異なっていたのでした。
これで原因はわかりましたが、正式な規格ではないYYYY/MM/DDはSafariでも対応していた記憶があるので、各ブラウザがどの書式に対応しているか調べてみることにしました。

検証内容

ISO 8601と慣習的に使用されているYYYY/MM/DD hh:mm:ssを中心に各ブラウザの日付書式の対応状況を確認してみます。
実際に検証する日付の書式は、日付の区切りがハイフンかスラッシュ、日付と時間の区切りが"T"か空白、タイムゾーン指定があるか無いかの組み合わせで合計8通りとしました。

var dates = [
        "2016-09-20T12:00:00",
        "2016-09-20T12:00:00+09:00",
        "2016-09-20 12:00:00", 
        "2016-09-20 12:00:00+09:00", 
        "2016/09/20T12:00:00",
        "2016/09/20T12:00:00+09:00",
        "2016/09/20 12:00:00",
        "2016/09/20 12:00:00+09:00"

];

var s = "";
for (var i=0; i < dates.length; i++) {
var date = new Date(dates[i]);
	s  += 'new Date("' +dates[i] + '"): ' + date + '\n';
}

console.log(s);

各ブラウザで上記のコードを実行した結果は次のようになりました。

日付がハイフン区切り

まずは、日付がハイフン区切りの結果を確認します。
f:id:artteknika_nakamura:20160930150504p:plain

日時"T"区切り、タイムゾーンなし

2016-09-30T12:00:00
IE8以下とSafari 5.x以外は対応かと思いきや、タイムゾーン省略時の解釈がブラウザごとに異なり、FirefoxとIE9以降では、日本時間と解釈するため、そのまま日本時間の2016年9月30日 12:00:00となりますが、ChromeとSaferi 9.xは世界標準時と解釈するため日本時間の2016年9月30日 21:00:00となります。ブラウザによって時間がズレてしまうので実質的に使えないでしょう。

日時"T"区切り、タイムゾーンあり (ISO 8601拡張形式)

2016-09-30T12:00:00+09:00
IE8以下は対応していませんが、それ以外はすべて対応しています。IE9以降対応でよいならこの書式で問題ないでしょう。

日時が空白区切り

2016-09-30 12:00:00、2016-09-30 12:00:00+09:00
日時が空白区切りは、タイムゾーンあり・なし共に、IE、Safari系がすべて非対応となっています。RDBからSQLで取得する場合この形式になっていることが多いので、サーバからのデータをJavaScript側で使用する場合は注意が必要です。