JavaScriptで日付・時刻の値を文字列に整形するコードを紹介します。
こちらの記事ではJavaScriptで現在の日時を取得するコードを紹介しました。 時刻はDateオブジェクトとして取得されるため、画面に表示するために、文字列に変換して整形することがあります。 この記事では、Dateオブジェクトの日付・時刻の値を文字列に整形するコードを紹介します。
Dateオブジェクトから年月日や時分秒の値を取得するには、以下のメソッドを利用します。
値は数値で取得できますので、取得した数値を文字列に変換して文字列表現に変換します。
下記の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.`);
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-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);
下記のコードが置換コードです、こちらは先の例と同じ動作であり、"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);
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[時刻表示]のリンクをクリックします。画面上部の[現在の時刻]欄に"yyyy-MM-dd hh:mm:ss"形式の時刻が表示されます。
