Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

今日の日付・時刻を表示する

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

今の日付・時刻を取得するには、以下のようにJavaScriptを記述します。

var nowdate = new Date();
var year = nowdate.getFullYear(); // 年
var mon  = nowdate.getMonth() + 1; // 月
var date = nowdate.getDate(); // 日
var week = nowdate.getDay(); // 曜日
var hour = nowdate.getHours(); // 時
var min  = nowdate.getMinutes(); // 分
var sec  = nowdate.getSeconds(); // 秒
var msec = nowdate.getMilliseconds(); // ミリ秒

上記のJavaScriptソースで、日付や時刻表示に必要な各数値がそれぞれの変数に格納されます。あとは、この変数を使って、自由な形で日付・時刻表記フォーマットを書くだけです。
例えば、以下のように。

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

日付や時刻の各数値が個別に得られているので、どんな形式でも表示可能です。好みの形式で書けばよいでしょう。

なお、曜日は、0~6の数値で得られます。0が日曜日で、6が土曜日です。
実際に曜日文字列として表示するには、以下のような曜日文字列の配列を用意しておき、それを使って表示する必要があります。

var weekchars = new Array( "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" );
var todayweek = weekchars[ week ]; // 曜日

※曜日の文字列は、何でも自由に書けます。「日曜日」を「(日)」にしても「Sunday」にしても「Sun」にしても何でも構いません。

上記のJavaScriptソース2行を先ほどのソース末尾に加えた上で、以下のように記述すると、曜日を文字で表示できます。

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

上記のHTML&JavaScript群を全部まとめて実際に表示すると、以下のように見えます。

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

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど