JavaScriptで日付取得と桁合わせ

JavaScript

liquidfunc2010-05-23


JavaScriptの日付取得と、先頭0埋めの桁合わせ。new Date()でオブジェクト作ってあげて、あとは出力したい形式へと地道に変換してあげます。

JavaScriptの組込関数には便利なものがない件

Javaだと"YYYY/MM/DD"みたいな文字列を渡すことで、Dateオブジェクトを自在にフォーマットすることができますが、JavaScriptはそういうのないようです。

それから、年はともかく、月日や時分秒の桁合わせも自分で実装する必要があります。気にせず出力しちゃうと以下のようになってカッコ悪い。

2010/1/5 13:2
2010/5/23 0:20
2010/10/10 11:55

サンプルコード

<html>
<head>
<title>JavaScriptで日付取得</title>
</head>
<body>

<script type="text/javascript">
// 1桁の数字を0埋めで2桁にする
var toDoubleDigits = function(num) {
  num += "";
  if (num.length === 1) {
    num = "0" + num;
  }
 return num;     
};

// 日付をYYYY/MM/DD HH:DD:MI:SS形式で取得
var yyyymmddhhmiss = function() {
  var date = new Date();
  var yyyy = date.getFullYear();
  var mm = toDoubleDigits(date.getMonth() + 1);
  var dd = toDoubleDigits(date.getDate());
  var hh = toDoubleDigits(date.getHours());
  var mi = toDoubleDigits(date.getMinutes());
  var ss = toDoubleDigits(date.getSeconds());
  return yyyy + '/' + mm + '/' + dd + ' ' + hh + ':' + mi + ':' + ss;
};

document.writeln(yyyymmddhhmiss());
</script>

</body>
</html>


toDoubleDigits関数は、1行目で強制的に文字列へと変換しています。そうしないと変数numが文字列でなかった場合に、num.lengthが正しく処理されません。
このコードでは、if 文に入らない場合も引数numは強制的に文字列へと変換されて返ります。なぜそうしているかというと、 yyyymmddhhmiss関数のreturn文で、yyyy + '/' + mm + '/' + dd + ' ' + hh + ':' + mi + ':' + ss という形式へフォーマットするように記述していますが、例えば yyyy + mm + dd + hh + mi + ss という形式にしたい場合、あらかじめ文字列にしておかないと、数値演算されてしまいバグとなってしまうからです。

これでキレイに桁合わせした日付が表示されます。

2010/01/05 13:02
2010/05/23 00:20
2010/10/10 11:55

おまけ - Timerを利用して1秒毎に時間を表示する

JS Binという便利なJavaScriptのオンラインツールがあったのでうｐしておきました。こちらのURLからどうぞ。Previewボタンを押すと、実行画面を見ることもできます。
http://jsbin.com/uloyu/5/edit

setInterval(yyyymmddhhmiss, 1000);

Timerについてですが、第1引数は「実行する関数」を、第2引数には「実行間隔」をミリ秒単位で渡します。ここで注意しなければならないのが、第1引数で渡す関数の中で、document.write()のようなDOM全体に影響を及ぼすコードを絶対に書いてはいけないということです。ブラウザが不安定になり、クラッシュします。サンプルコードのようにinnerHTMLを使ってDOMの一部分だけを処理するようにしてください。