JavaScriptで日付と時刻を扱うための簡単なサンプルを示します。
JavaScriptで日付と時刻を扱うにはDateクラスを利用します。
ブラウザのChrome上で
右クリック ＞ 検証 で表示される開発者向けツールを使うと簡単に確認できます。
開発者向けツールのConsoleタブで以下のように入力してみてください。
new Date()
結果として
Mon Mar 09 2020 13:24:23 GMT+0900 (日本標準時)
のような現在の日付と時刻が返されると思います。
変数に代入してDateクラスのメソッドを利用するともっと色々とできます。
year = today.getFullYear();
とすると変数yearに2020などのような西暦年部分が取り出されます。ほかにもgetMonth()やgetHours()など分かりやすい名前のメソッドが用意されています。
Dateクラスの主なメソッド
Dateクラスの主なメソッド一覧です。
| メソッド名 | 戻り値 | 例 |
|---|---|---|
| getFullYear() | 西暦年 | 2020（西暦2020年） |
| getMonth() | 月を表す0~11の値（0が1月を表す）利用する際は+1して利用 | 4（=5月） |
| getDate() | 日を表す1~31の値 | 26（26日） |
| getDay() | 曜日を表す0~6の値（0が日曜日） | 1（=月曜日） |
| getHours() | 24時間表記の時を表す0~23の値 | 13（13時） |
| getMinutes() | 分を表す0~59の値 | 36（36分） |
| getSeconds() | 秒を表す0~59の値 | 45（45秒） |
| getTime() | 1970年1月1日午前0時0分0秒からの経過ミリ秒数 | 1583815568789 |
詳しくは以下のDateクラスドキュメントをご覧ください。
実際の利用例を2つのサンプルを通じて示します。
起動時にDateクラスを使って現在日時を表示する
実行イメージ
ソースコード
datetime.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dateクラスで現在日時を得る</title>
<script>
window.addEventListener("load", function(){
// 現在日時を取得
var today = new Date();
// そのまま表示してみる
document.getElementById("today").innerHTML = today;
});
</script>
</head>
<body>
<h1>Dateクラスで現在日時を得る</h1>
<p id="today"></p>
</body>
</html>
実行例をご覧のようにDateクラスの戻り値をそのまま利用すると、1行にほぼ全ての時刻情報が表示されてしまい使い易いとは言えません。
Dateクラスのメソッドを利用すると表示形式を見易く出来ます。
2020/3/10(火) 13:18:11
のような感じで曜日の部分なども日本人になじみやすい形で表示してみます。
日付と時刻を整形して表示する
実行イメージ
ソースコード
datetime2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日付と時刻を整形して表示する</title>
<script>
window.addEventListener("load", function(){
// 曜日表示用
var week = ["日", "月", "火", "水", "木", "金", "土"];
// 現在日時を取得
var today = new Date();
// 年月日を取得
var year = today.getFullYear();
var month = today.getMonth() + 1; // 1月~12月 -> 0~11
var date = today.getDate();
// 曜日を取得
var day = today.getDay(); // 日~土 -> 0~6
// 時分秒を取得
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
// 現在時刻を表示する
document.getElementById("date").innerHTML =
year + "/" + month + "/" + date + // 年月日
"(" + week[day] + ")" + // 曜日
" " + hour + ":" + minute + ":" + second; // 時分秒
});
</script>
</head>
<body>
<h1>日付と時刻を整形して表示する</h1>
<p id="date"></p>
</body>
</html>
解説
残念ながら日本人の使用する「月」「火」・・・「日」などのような曜日を漢字で表すようなメソッドはありません。曜日はgetDay()メソッドで0～6の数値が返ってきます。（0が日曜日）この数値を利用して配列の添え字に対応させて利用出来る文字列を作成しておきます。
// 曜日表示用 var week = ["日", "月", "火", "水", "木", "金", "土"];
例えば、月曜日なら1が返される為、week[getDay()の戻り値]のように参照すれば「月」という文字列が得られることになります。
実際にはこんな感じで曜日の文字列を取得できます。
var week = ["日", "月", "火", "水", "木", "金", "土"]; // 曜日を取得 var day = today.getDay(); // 日~土 -> 0~6 var youbi = week[day];
現在日時（この場合は、パソコンやスマホ上で表示されているローカルな日時のことです）を取得するには、
var today = new Date();
のようにDateクラスを引数なしでインスタンス化します。
これで変数todayを通してDateクラスの各メソッドにアクセスできるようになります。
年月日をそれぞれgetFullYear(), getMonth(), getDate()メソッドを使ってyear, month, dateの各変数に取得します。
// 年月日を取得 var year = today.getFullYear(); var month = today.getMonth() + 1; // 1月~12月 -> 0~11 var date = today.getDate();
月のみ注意が必要です。1月～12月はgetMonth()では0～11で返される為、戻り値に+1しています。
時分秒は、getHours(), getMinutes(), getSeconds()をそのまま利用すればOKです。各メソッドの綴りの最後に「s」がついている点に注意してください。（わたしは最後のsをつけ忘れて、getHour()などと利用してなぜ出来ないんだ！としばらく嘆いていました。思い込みは怖いですね）
// 時分秒を取得 var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds();
最後に各変数に取得した値を文字列連結して表示します。
// 現在時刻を表示する
document.getElementById("date").innerHTML =
year + "/" + month + "/" + date + // 年月日
"(" + week[day] + ")" + // 曜日
" " + hour + ":" + minute + ":" + second; // 時分秒
以上、JavaScriptで日付と時刻を扱うでした。
コメント