JavaScriptで日付と時刻を取得する方法、整形して表示する方法を解説します。
パソコンで取得される現在時刻は、Dateクラスを使うと取得できます。
簡単に書くとこうなります。
let today = new Date();
ここで変数todayは、Dateクラスのインスタンス変数です。
変数の中身は、現在時刻が文字列として入っています。
Wed Apr 27 2022 08:46:21 GMT+0900 (日本標準時)
サンプルを作って確認します。
Dateクラスで現在時刻を取得するサンプル
実行イメージ
ソースコード
js_date.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dateクラスで現在時刻を得る</title>
<script>
window.addEventListener("load", ()=>{
// 現在日時を取得
let today = new Date();
// そのまま表示してみる
document.getElementById("today").innerHTML = today;
});
</script>
</head>
<body>
<h1>Dateクラスで現在時刻を得る</h1>
<p id="today"></p>
</body>
</html>
実際はDateクラスの値をそのまま使うことはまれだと思います。
次にDateクラスのメソッドを利用して必要な情報のみ取り出してみます。
日付・曜日・時刻を整形して表示する
実行イメージ
ソースコード
js_date_format.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日付と時刻を整形して表示する</title>
<style>
body{ font-size: 24pt; }
</style>
<script>
window.addEventListener("load", ()=>{
// 曜日を漢字で表示するため
let week = ["日", "月", "火", "水", "木", "金", "土"];
// 現在日時を取得
let today = new Date();
// 年月日を取得
let year = today.getFullYear();
let month = today.getMonth() + 1; // 1月~12月 -> 0~11
let date = today.getDate();
// 曜日を取得
let day = today.getDay(); // 日~土 -> 0~6
// 時分秒を取得
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
// 現在時刻を表示する
document.getElementById("date").innerHTML =
year + "/" + month + "/" + date + // 年月日
"(" + week[day] + ")" + // 曜日
" " + hour + ":" + minute + ":" + second; // 時分秒
});
</script>
</head>
<body>
<p id="date"></p>
</body>
</html>
解説
日付・曜日・時刻は、Dateクラスのメソッドの戻り値を利用して取り出すことができます。
| 種類 | メソッド名 | 取得できる値 |
|---|---|---|
| 西暦年（4桁） | getFullYear() | 例）2020 |
| 月 | getMonth() | 0～11（実際の月-1が返される） |
| 日 | getDate() | 1～31 |
| 曜日 | getDay() | 0～6 が 日～土に対応 例）月曜は1 |
| 時 | getHours() | 0～23（24時間制） |
| 分 | getMinutes() | 0～59 |
| 秒 | getSeconds() | 0～59 |
注意点は、月を取得する getMonth()と曜日を取得するgetDay()です。
getMonth()は実際の月よりも-1した値を返します。5月なら4が返されるため実際に表示などする際は、値を+1してあげる必要があります。
例）
let month = today.getMonth() + 1;
曜日を取得するgetDay()も0～6の数値で返ってくるため、月、火、水…などと表示したい場合は、次のような配列を定義しておき、
let week = ["日", "月", "火", "水", "木", "金", "土"];
getDay()の戻り値を配列の添え字に利用すると曜日を文字列として表示できます。
例）
let day = today.getDay(); console.log(week[day]); // dayが1なら ===> 月
2つの日付の差分日数を求める
Dateオブジェクト同士の差分をとるとミリ秒単位で返されることを利用して、2つの日付の差分日数を求めることもできます。
// 2つの日付の差分日数を得る
let day1 = new Date("2022/04/15");
let day2 = new Date("2022/04/20");
let sabun = (day2 - day1) / 86400000; // 1日 = 24 * 60 * 60 * 1000 = 86400000ミリ秒
console.log(sabun + "日");
実行結果
5日
Dateクラスは現在時刻以外も利用できる
上記の差分日数ではDateクラスの引数に日付のみ指定しましたが、 年月日＋時分秒 も指定できます。
let today = new Date("2019-02-01 10:30:24");
Dateクラスには、今回紹介した以外にも様々なメソッドがあります。
色々と確認してみるといいでしょう。
Date - JavaScript | MDN
JavaScript の Date オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。Date オブジェクトは、1970 年 1 月 1 日午前 0 時 (UTC)（元期）...
developer.mozilla.org
コメント