• JavaScript

jQueryで日付や時刻を表示する方法【new Date()の使い方を解説】

投稿日:2020年12月28日（最終更新日:2022年03月19日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

jQueryで日時を取得する方法

WEBサイトやWEBサービスの制作では日時の情報を取り扱いたい状況があります。HTMLとCSSだけでは日時のデータを入手することはできませんが、jQuery(Javascript)を使えば現在の日時を取得して表示させることができます。

jQueryで日時を取得するには、new Date()を使用します。

new Date()は以下のように記述するだけで、現在の日時のデータを取得することができます。

なお、new Date()は取得しているだけなので、画面に表示させるにはtext()メソッドやhtml()メソッドを使います。

jQueryをCDNで読み込む

new Date()自体はjQueryを読み込まずに使用できますが、その他の処理にはjQueryを使いますので事前に読み込ませておいてください。

ダウンロードしたものを使う方法もありますが、ここではCDNを使ってサイトに読みこむ方法を説明します。

下記のコードをコピーして貼りつければOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

まとめると次のようになります。ここでは、new Date()で取得したデータを一旦「datetime」という任意の変数に格納しています。

<div id="test1" class="test"></div>

$(function(){
    var datetime = new Date();//取得
    $("#test1").html(datetime);//表示
});

正し、上記の例のようにnew Dateで取得した日時は普段目にする日時の表示ではないためデータを加工する必要があります。

jQueryで日時をフォーマットする方法

日時を自由な形式で表示するためには、まず年月日と曜日、時刻をそれぞれ用意されている専用のメソッドを使用して個別に取り出します。

ばらばらに取り出した年月日・曜日・時刻のデータを再度つなぎ合わせることで、自由な形式で表示を実現させます。

年月日を取得する

「年」「月」「日」それぞれに対して専用のメソッドを使ってデータを取り出します。

年を取得する

new Dateで取得したデータから「年」の情報を取り出すにはgetFullYear()メソッドを使います。

以下のように記述して使用します。

<div id="test3" class="test"></div>

$(function(){
    var year = new Date().getFullYear();
    $("#test3").html(year);
});

月を取得する

new Dateで取得したデータから「月」の情報を取り出すにはgetMonth()メソッドを使います。

正し、現在の月を取得するためにはメソッドの仕様上、取得したデータに「1」をプラスする必要があるため、実際には次のように記述して使用します。

<div id="test4" class="test"></div>

$(function(){
    var month = new Date().getMonth() + 1;
    $("#test4").html(month);
});

日を取得する

new Dateで取得したデータから「日」の情報を取り出すにはgetDate()メソッドを使います。

以下のように記述して使用します。

<div id="test5" class="test"></div>

$(function(){
    var date = new Date().getDate();
    $("#test5").html(date);
});

日本語表記の曜日を取得する

日本語表記の曜日は年月日と異なりメソッド単体で取得することができません。

getDay()メソッドを使うと曜日を番号で取得できるので、この番号を利用して日本語表記の曜日を表示させます。

まず、日曜から土曜までの日本語表記の曜日を配列として用意します。この配列から、曜日番号を使って当日の曜日を取り出します。

なお、曜日番号は日曜が「0」月曜が「1」というようにわりふられているので、配列の曜日も日曜始まりにするようにしてください。

下の例では「日、月、火」という書き方ですが、順番さえ合っていれば「日曜日、月曜日、火曜日」でも「SUN、MON、TUE」でも問題ありません。

<div id="test6" class="test"></div>

$(function(){
    var num = new Date().getDay();
    var weekday = ["日","月","火","水","木","金","土"];
    var week = weekday[num];
    $("#test6").html(week);
});

時刻を取得する

時刻も年月日と同様に個別のメソッドを使って取り出していく。

時を取得する

new Dateで取得したデータから「時」の情報を取り出すにはgetHours()メソッドを使います。

以下のように記述して使用します。

<div id="test7" class="test"></div>

$(function(){
    var hour = new Date().getHours();
    $("#test7").html(hour);
});

分を取得する

new Dateで取得したデータから「分」の情報を取り出すにはgetMinutes()メソッドを使います。

以下のように記述して使用します。

<div id="test8" class="test"></div>

$(function(){
    var minute = new Date().getMinutes();
    $("#test8").html(minute);
});

秒数を取得する

new Dateで取得したデータから「秒」の情報を取り出すにはgetSeconds()メソッドを使います。

以下のように記述して使用します。

<div id="test9" class="test"></div>

$(function(){
    var second = new Date().getSeconds();
    $("#test9").html(second);
});

組み合わせて表示する

ここまでで個別に取得した日時のデータを任意の形式になるように組み合わせていきます。

よく見かける「20XX年XX月XX日（火）XX:XX:XX」のように「年」「月」「日」などのテキストや「:」といった記号を入れてつなぎ合わせればOKです。

<div id="test10" class="test"></div>

$(function(){
    var year = new Date().getFullYear();
    -省略-
    var second = new Date().getSeconds();
    $("#test10").html(year + "年" + month + "月" + date + "日" + "（" + week + "）" + hour + ":" + minute + ":" + second);
});

リアルタイムの日時を表示する

先程の例では、ページが読み込まれて処理が実行された瞬間の時刻で秒数が止まっていることがわかります。

時計のようにリアルタイムで時刻を刻むようにしたい場合は、setIntervalを利用して作成します。

setIntervalは処理を実行する間隔をミリ秒で設定することができるので、1000ミリ秒を設定し1秒ごとに時刻を取得して表示するように作ります。

下記のようにsetIntervalの中に全て記述することで秒刻みの現在日時を表示することができます。

<div id="test11" class="test"></div>

setInterval(function(){
    var y = new Date().getFullYear();
    var m = new Date().getMonth() + 1;
    var d = new Date().getDate();
    var w = new Date().getDay();
    var wd = ["日","月","火","水","木","金","土"];
    var youbi = wd[w];
    var h = new Date().getHours();
    var min = new Date().getMinutes();
    var s = new Date().getSeconds();
    $("#test11").html(y + "年" + m + "月" + d + "日" + "（" + youbi + "）" + h + ":" + min + ":" + s);
},1000);

まとめ

多少の工程と注意点がありますがjQueryを使えば比較的簡単に日付や曜日、時刻を表示することが出来ます。PHPでも日付を取得したり表示することが可能です。

PHPで日付を取得する方法について詳しくはこちらをご覧ください。

PHPのdate関数を使って日付を取得する方法

PHPのdate関数は当日の日付を年月日で取得したり、現在時刻を取得することが出来る関数です。date関数の使い方は簡単で、「date('フォーマット形式')」という形で記述します...【もっと読む】