javascript 現在日付と曜日を表示する

作成日 2020.09.05
更新日 2022.06.15
javascript
javascript

javascriptで、new Date()を使用して、現在日付と曜日を表示するサンプルコードを記述してます。

1. 環境
2. new Date()使い方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

new Date()使い方

new Date()を使うと、以下のように現在の日付と時刻を取得することが可能です。これを整形して曜日を取得します。

let now = new Date();
console.log(now);
// Sat Sep 05 2020 16:33:57 GMT+0900 (日本標準時)

取得した日付を、年月日形式に整形するには以下のようにします。

let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();

let time = year + '年' + month + '月' + date + '日';
console.log(time); // 2020年9月5日

曜日を取得するには、getDay()を利用して、
getDay()は対応する曜日を数字で返してくれるので、対応する曜日を配列化しておきます。
※getDay()は日曜 = 0、月曜 = 1と順番に値が戻ってきます。

let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();

let day_arr = ['日', '月', '火', '水', '木', '金', '土']
let day = day_arr[now.getDay()];

let time = year + '年' + month + '月' + date + '日' + '（' + day + '）';
console.log(time); // 2022年6月15日（水）

サンプルコード

以下は、
「取得ボタン」をクリックすると、現在日付と曜日を表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    width: 800px;
  }
</style>
<script>

  function hoge() {

    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let date = now.getDate();

    let day_arr = ['日', '月', '火', '水', '木', '金', '土']
    let day = day_arr[now.getDay()];

    let time = year + '年' + month + '月' + date + '日' + '(' + day + ')';

    // 表示
    let obj = document.getElementsByClassName('badge-primary')[0];
    obj.textContent = time;

  }

</script>

<body>
  <div class="main">

    <h2><span class="badge badge-primary">現在日付と曜日</span></h2>

    <button onclick="hoge()" type="button" class="btn btn-raised btn-primary">
      取得
    </button>

  </div>
</body>

</html>

現在日付と曜日が表示されていることが確認できます。