にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

今日の日付・時刻を表示する方法 [日付・時刻]

現在の日付や時刻をJavaScriptで表示するには、new Date();で現在日時を表す日付オブジェクトを作った後、年月日時分秒それぞれを取得するメソッドを使うだけで簡単です。例えば、getFullYearメソッドで年、getMonthメソッドで月、getDateメソッドで日、getDayメソッドで曜日……など、年月日・曜日・時分秒・ミリ秒の各日付要素を個別に取得できます。それらを組み合わせれば、どんな形式でも好きなように日付を表記(表示)できます。

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

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桁の文字列に修正する」という処理を自力で加える必要があります。
例えば以下のような関数を作っておくと良いでしょう。

JavaScriptソース

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行目のように記述する必要があります。

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 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行目で)月名の配列を作っておきます。

JavaScriptソース

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を使うと現在日時をいろいろな方法で自由に表示できます。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---