日時の取得の手順

Date オブジェクトから今日の日時を取得する

手順１：現在の日時をインスタンス化し、変数に代入する

まず、「new Date()」を使って、現在の日時を記憶した状態（インスタンス化）し、変数に代入します。

const today = new Date();

Date オブジェクト日時を取得する主なメソッド対応表

手順２：年、月、日、時 を個別に取得し変数に代入する

● HTML部分

• ここに日付を表示する

• ここに日付を表示する

 
上記の表を参考に、現在の日時をインスタンス化した Date オブジェクトから年月日時を個別に取得し、変数に代入します。

const today = new Date();
const year = today.getFullYear();/*年*/
const month = today.getMonth()+1;/*月*/
/*月は0始まりなので +１（プラス）する*/
const day = today.getDay();/*曜日*/
const weeks = [‘日’,’月’,’火’,’水’,’木’,’金’,’土’];/*曜日の配列*/
/*曜日の配列を作りその中の該当する曜日で表示する*/
const week = weeks[day];/*配列の中から抽出*/
const date = today.getDate();/*日*/
const hour = today.getHours();/*時*/
const minute = today.getMinutes();/*分*/
let str = document.getElementById(‘today’);/*表示したい場所のIDを取得し変数に代入*/
/*表示したい場所のテキストを書き換える*/
str.textContent = `今日の日時は${year}年${month}月${date}日${week}曜日の${hour}時${minute}分です。`;

最後に表示したい場所のIDを getElementById を使って取得し、 textContent を使って表示したい場所のテキストを書き換えます。

getElementById を使わずに、 querySelector を使ってHTMLの要素を取得して書き換えるのも一般的な方法の一つになります。
ただ処理の時間は「getElementById」よりも時間がかかるので使い分けることが重要になります。
下記は「querySelector」を使った場合の書き方になります。

● querySelector を使った場合

• // HTMLの要素を取得
• let str2 = document.querySelector(‘#today2’);
• str2.textContent = `今日の日時は${year}年${month}月${date}日${week}曜日の${hour}時${minute}分です。`;

以下の CodePenも参考にしてください。