有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > 世界標準時(UTC)で表示された日時を jQuery で書き替える

フロントエンドエンジニアのblog

RSS

世界標準時(UTC)で表示された日時を jQuery で書き替える

WordPress では、一般設定でタイムゾーンを設定することによって、投稿日時などがその地域の日時で表示されます。日本時間の場合は "東京" または "UTC+9" を設定します。

先日、ユーザー管理のために使用したプラグインで、登録日時は日本時間で表示されるのに、更新日時とログイン日時が9時間プラスされて表示されるという現象が発生しました。世界標準時(UTC)は日本時間より9時間遅れ。今回は9時間プラスなので、世界標準時で表示されているわけでもありません。

原因がわからないので、仕方なく jQuery で日時を修正することにしたのですが、実装後あらためて確認すると、一般設定で "東京" を設定しているうえに、functions.php に

date_default_timezone_set('Asia/Tokyo');

を記述していたことが原因のようでした。通常はこのように設定していても問題ないと思うのですが、プラグインのバグでしょうか、functions.php の記述を削除したら正しく表示されました。

でも折角ですし、また何か役立つ場合があるかもしれませんので、今回は表示された日時を9時間戻しましたが、世界標準時(UTC)で表示された日時を日本時間に書き替える(9時間進める)方法を記しておきます。

該当の日時は "2016-10-06 09:30:05" のようなフォーマットで表示されていました。これはテキストデータですので、まずこれを日時のデータとして扱えるように new Date() で取得します。

var time = new Date($('selector').text());

これで取得できるかと思ったのですが、Internet Explorer と Safari で正しく取得することができません。

調べてみると、new Date() の年月日の区切りにハイフンは使用しないほうがよいという情報がいくつかありましたので、年月日の区切りをスラッシュに置き換えて取得してみました。

var time = new Date($('selector').text().replace(/-/, '/'));

しかし今度は、Firefox と相変わらず Safari で正しく取得できません。

そこで、素直に(?) "年, 月, 日, 時, 分, 秒" に分割して取得することにしました。
match 関数と正規表現を使って、日時のテキストから年, 月, 日, 時, 分, 秒の各数値部分を取り出し、new Date() で取得します。

var time = $('selector').text();
    time = time.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
    time = new Date(time[1], time[2], time[3], time[4], time[5], time[6]);

次に、取得した日時データを日本時間に変換するため、9時間プラスします。

time.setHours(time.getHours() + 9);

そして、補正した日時データから "年, 月, 日, 時, 分, 秒" を取り出しますが、このとき、元のフォーマットと同じように、年以外は2桁で表示するため、先頭に "0" を付けて、右から2桁を取り出します。

YYYY = time.getFullYear();
MM = ('0' + time.getMonth()).slice(-2);
DD = ('0' + time.getDate()).slice(-2);
hh = ('0' + time.getHours()).slice(-2);
mm = ('0' + time.getMinutes()).slice(-2);
ss = ('0' + time.getSeconds()).slice(-2);

最後に、これを元のデータと同じフォーマットで置き換えます。

$('selector').text(YYYY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss);

対象が複数の日時データで、日時データが存在しない場合もありますので、最終的に以下のような記述となりました。

$('selector1, selector2').each(function(){
  if ($(this).text() !== ''){
    var time = $(this).text();
        time = time.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
        time = new Date(time[1], time[2], time[3], time[4], time[5], time[6]);
        time.setHours(time.getHours() + 9);
        YYYY = time.getFullYear();
        MM = ('0' + time.getMonth()).slice(-2);
        DD = ('0' + time.getDate()).slice(-2);
        hh = ('0' + time.getHours()).slice(-2);
        mm = ('0' + time.getMinutes()).slice(-2);
        ss = ('0' + time.getSeconds()).slice(-2);
    $(this).text(YYYY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss);
  }
});

加算あるいは減算する数値を変更すれば、任意の時間に書き替えることができますし、

time.setDate(time.getDate() + 7);

のようにして、1週間後の日時を表示したり、

time.setMonth(time.getMonth() + 3);

のようにして、3ヵ月後の日時を求めたりするといったことにも応用できます。

この記事へのフィードバック

Facebook のコメントです。

コメントを残す

この記事のトラックバックURL:
https://www.will3in.co.jp/blog/article/rewrite-utc-date-time-by-jquery/trackback/

このページの先頭へ