日付・時刻のDateオブジェクトを文字列に整形する - 日付・時刻のFormat - JavaScript

JavaScriptで日付・時刻の文字列を整形するコードを紹介します。

プログラム:単純な整形

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function exec() {
      var date = new Date();

      format_str = 'YYYY-MM-DD hh:mm:ss';
      format_str = format_str.replace(/YYYY/g, date.getFullYear());
      format_str = format_str.replace(/MM/g, date.getMonth());
      format_str = format_str.replace(/DD/g, date.getDate());
      format_str = format_str.replace(/hh/g, date.getHours());
      format_str = format_str.replace(/mm/g, date.getMinutes());
      format_str = format_str.replace(/ss/g, date.getSeconds());

      target = document.getElementById("timeframe");
      target.innerHTML = format_str;
    }
  </script>
</head>
<body>
  <div>現在の時刻:<span id="timeframe"></span></div>
  <a href="#" onclick="exec();">時刻表示</a>
</body>
</html>

解説

フォーマットの文字列を用意して、置換操作により整形する動作になっています。

  format_str = 'YYYY-MM-DD hh:mm:ss';

上記コードがフォーマット文字列です。

  format_str = format_str.replace(/YYYY/g, date.getFullYear());
  format_str = format_str.replace(/MM/g, date.getMonth());
  format_str = format_str.replace(/DD/g, date.getDate());
  format_str = format_str.replace(/hh/g, date.getHours());
  format_str = format_str.replace(/mm/g, date.getMinutes());
  format_str = format_str.replace(/ss/g, date.getSeconds());

上記コードが、フォーマット文字列を実際の時刻の数値に置換するコードです。"YYYY"が年、"MM"が月、"DD"が日、"hh"が時、"mm"が分、"ss"が秒の値に置換されます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[時刻表示]のリンクをクリックします。画面上部の[現在の時刻]欄に"yyyy-M-d h:m:s"形式の時刻が表示されます。

プログラム:"yyyy-MM-dd hh:mm:ss" 形式で整形する

先のプログラムで"yyyy-M-d h:m:s"形式で整形できましたが、実用では"yyyy-MM-dd hh:nn:ss"形式に変換したいことが多いです。以下では、"yyyy-MM-dd hh:mm:ss" 形式で整形するコードを紹介します。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function exec() {
      var date = new Date();

      var year_str = date.getFullYear();
      var month_str = date.getMonth();
      var day_str = date.getDate();
      var hour_str = date.getHours();
      var minute_str = date.getMinutes();
      var second_str = date.getSeconds();

      month_str = ('0' + month_str).slice(-2);
      day_str = ('0' + day_str).slice(-2);
      hour_str = ('0' + hour_str).slice(-2);
      minute_str = ('0' + minute_str).slice(-2);
      second_str = ('0' + second_str).slice(-2);

      format_str = 'YYYY-MM-DD hh:mm:ss';
      format_str = format_str.replace(/YYYY/g, year_str);
      format_str = format_str.replace(/MM/g, month_str);
      format_str = format_str.replace(/DD/g, day_str);
      format_str = format_str.replace(/hh/g, hour_str);
      format_str = format_str.replace(/mm/g, minute_str);
      format_str = format_str.replace(/ss/g, second_str);

      target = document.getElementById("timeframe");
      target.innerHTML = format_str;
    }
  </script>
</head>
<body>
  <div>現在の時刻:<span id="timeframe"></span></div>
  <a href="#" onclick="exec();">時刻表示</a>
</body>
</html>

解説

フォーマットの文字列を用意して、置換操作により整形する動作になっています。

  format_str = 'YYYY-MM-DD hh:mm:ss';

上記コードがフォーマット文字列です。

      var year_str = date.getFullYear();
      var month_str = date.getMonth();
      var day_str = date.getDate();
      var hour_str = date.getHours();
      var minute_str = date.getMinutes();
      var second_str = date.getSeconds();

      month_str = ('0' + month_str).slice(-2);
      day_str = ('0' + day_str).slice(-2);
      hour_str = ('0' + hour_str).slice(-2);
      minute_str = ('0' + minute_str).slice(-2);
      second_str = ('0' + second_str).slice(-2);

上記コードにより、月、日、時、分、秒の値を2桁で揃えます。値の頭に"0"を追加し、末尾から2文字を抜き出すことで2桁で揃えられます。

例

15 → 頭に"0"を追加 → 015 → 末尾から2文字を抜き出し → 15
4 → 頭に"0"を追加 → 04 → 末尾から2文字を抜き出し → 04

下記のコードが置換コードです、こちらは先の例と同じ動作であり、"YYYY"が年、"MM"が月、"DD"が日、"hh"が時、"mm"が分、"ss"が秒の値の文字列に置換されます。

      format_str = 'YYYY-MM-DD hh:mm:ss';
      format_str = format_str.replace(/YYYY/g, year_str);
      format_str = format_str.replace(/MM/g, month_str);
      format_str = format_str.replace(/DD/g, day_str);
      format_str = format_str.replace(/hh/g, hour_str);
      format_str = format_str.replace(/mm/g, minute_str);
      format_str = format_str.replace(/ss/g, second_str);