JavaScriptで現在の日時(年月日時分秒)を得て表示する方法

JavaScriptを使えば今の日付が得られますから、ページが表示された瞬間の日付を表示することは簡単にできます。年月日・曜日・時分秒それぞれ別個に取得できるので、自由な表記形式で日付や時刻を表示できます。
今の日付・時刻を取得するには、以下のようにJavaScriptを記述します。

var nowdate = new Date();
var year = nowdate.getFullYear();     // 年(4桁の西暦)
var mon  = nowdate.getMonth() + 1;    // 月(1～12)
var date = nowdate.getDate();         // 日(1～31)
var week = nowdate.getDay();          // 曜日(※0～6)
var hour = nowdate.getHours();        // 時(0～23)
var min  = nowdate.getMinutes();      // 分(0～59)
var sec  = nowdate.getSeconds();      // 秒(0～59)
var msec = nowdate.getMilliseconds(); // ミリ秒(0～999)

上記のJavaScriptソースで、日付や時刻表示に必要な各数値がそれぞれの変数に格納されます。注意点は月と曜日です。

• 月を取得するgetMonth()で得られる値は 0～11 です。「1月は0」、「2月は1」……「12月は11」という非常に紛らわしい値になっています。上記のソースではそこを考慮して、あらかじめgetMonth() + 1;のように1を加えて「1月が1」、「2月が2」……「12月が12」になるように調整しています。
• 曜日を取得するgetDay()で得られる値は 0～6 です。この点は後述します。

1行目の var nowdate = new Date(); で、現在日時を表す日付オブジェクトを作成しています。最初に1回必要です。それ以後のgetFullYearメソッドやgetMonthメソッドなどは、ここで作成したnowdate日付オブジェクトに対して使います。この「nowdate」という名前は例ですから「sakuratime」とか「tomoyodate」など何でも構いません。

年・月・日・時・分・秒・ミリ秒を整形して表示する

あとは、これらの変数を使って、自由な形で日付・時刻表記フォーマットを書くだけです。
例えば、以下のようにJavaScriptソースを記述します。

document.write("現在は、" + year + "年" + mon + "月" + date + "日の " + hour + "時" + min + "分" + sec + "秒" + msec + " です。");

すると、以下のように表示されます。

日付や時刻の各数値が個別に得られているので、どんな形式でも表示可能です。好みの形式で書けばよいでしょう。
なお、上記は「ページを読み込んだ時点」の日時が表示されるだけです。もし、現在日時をリアルタイムに更新して表示したい場合は、記事「現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法」で解説した方法を活用して下さい。

年月日時分秒の各数値を強制的に2桁に整形して表示する

上記の日時取得方法ではそれぞれの値が数値で得られるため、例えば「 3時5分7秒 」のように1桁しか表示されない場合もあります。もし「 03時05分07秒 」のように2桁で表示したい場合は「もし1桁だったら2桁の文字列に修正する」という処理を自力で加える必要があります。
例えば以下のような関数を作っておくと良いでしょう。

function set2fig(num) {
	// 桁数が1桁だったら先頭に0を加えて2桁に調整する
	var ret = num;
	if( num < 10 ) { ret = "0" + num; }
	return ret;
}

この関数の引数に、時分秒などの値を入れると、すべての数値を強制的に2桁にして表示ができます。例えば、現在の時刻を表示する場合には以下のように記述できます。

document.write("現在時刻は、" + set2fig(hour) + "時" + set2fig(min) + "分" + set2fig(sec) + "秒です。");

実際に表示すると以下のように見えます。

時も分も秒も、もし1桁だった場合には先頭に「0」を付加して2桁で表示されていることがお分かり頂けるでしょう。たまたま全部2桁で表示されるタイミングだった場合は、何秒後かに再読込してみて下さい。(^_^;)

曜日の表記文字列を自由に作る方法

さて、上記でも少し説明したように、曜日を取得するgetDayメソッドで得られる値は、文字列ではなく0～6の数値です。0が日曜日、1が月曜日、2が火曜日で……、6が土曜日です。
実際に曜日を表す文字列として表示するには、以下の6行目のような曜日文字列の配列を用意しておき、それを使って7行目のように記述する必要があります。

var nowdate = new Date();
var year = nowdate.getFullYear();    // 年(4桁の西暦)
var mon  = nowdate.getMonth() + 1;   // 月(1～12)
var date = nowdate.getDate();        // 日(1～31)
var week = nowdate.getDay();         // 曜日(※0～6)
var weekchars = new Array( "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" );
var todayweek = weekchars[ week ];   // 曜日を文字列で得る

曜日の文字列は、何でも自由に書けます。上記で記述した「日曜日」を「（日）」や「Sunday」や「Sun」など何にでも書き換えられます。
上記のJavaScriptソースを使って以下のように記述すると、曜日を文字で表示できます。

document.write("今日は、" + year + "年" + mon + "月" + date + "日" + todayweek + "です。");

実際に表示すると、以下のように見えます。

このように、日付や時刻を表示するのは簡単です。

月の表記文字列を「睦月,如月,弥生……」のように漢字で表示する方法

月を取得するgetMonthメソッドで得られる値が、「1月は0」、「2月は1」、「3月は2」……「12月は11」のように紛らわしくなっているのは、英語では月を January、February……のように名称で表すからでしょうかね……？
で、日本でも睦月(むつき)・如月(きさらぎ)・弥生(やよい)……師走(しわす)のように和名で月を示す表現がありますよね。和名というか、陰暦の名称ですが。
月名を表す配列を用意しておけば、JavaScriptを使って現在の月名を漢字で表すこともできます。例えば以下のようにJavaScriptソースを記述して(3行目で)月名の配列を作っておきます。

var nowdate = new Date();
var mon      = nowdate.getMonth();  // 月(0～11)
var monchars = new Array( "睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月", "葉月", "長月", "神無月", "霜月", "師走" );
var thismon  = monchars[ mon ];     // 月名を文字列で得る

ここではgetMonthメソッドで得られる値に1を足してはいない点に注意して下さい。JavaScript配列は0から始まるので、月を示す値も(デフォルトのまま)0から始まって問題ないためです。
上記のJavaScriptソースを使って以下のように記述すると、月名を漢字で表示できます。

document.write("今月は、" + thismon + "です。");

実際に表示すると、以下のように見えます。

上記のサンプル枠内には、今月が1月だと「睦月」、2月だと「如月」、3月だと「弥生」、4月だと「卯月」、5月だと「皐月」、6月だと「水無月」、7月だと「文月」、8月だと「葉月」、9月だと「長月」、10月だと「神無月」、11月だと「霜月」、12月だと「師走」と表示されるはずです。

このように、JavaScriptを使うと現在日時をいろいろな方法で自由に表示できます。

(更新日：2017年06月04日)