入力した年月日の曜日を表示させるHTMLとJavaScriptのコード

正確性重視 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>曜日を知る</title>
  <style>
    input[type="text"] {
      font-size: 16px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 80%;
      max-width: 400px;
    }
    
    button {
      font-size: 16px;
      padding: 10px 20px;
      background-color: #008CBA;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    #result {
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1></h1>
  <label for="input-date">日付を入力してください（YYYYMMDD）：</label>
  <br>
  <input type="text" id="input-date" name="input-date" placeholder="例：20240501">
  <button onclick="getDay()">曜日を表示する</button>
  <div id="result"></div>

  <script>
    function getDay() {
      const inputDate = document.getElementById("input-date").value;
      const year = inputDate.substring(0, 4);
      const month = inputDate.substring(4, 6) - 1; // monthは0から11で表現するため、1を引く
      const day = inputDate.substring(6, 8);
      const date = new Date(year, month, day);
      const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
      const dayOfWeek = weekdays[date.getDay()];
      const result = document.getElementById("result");
      result.innerHTML = `${year}年${month + 1}月${day}日は${dayOfWeek}曜日です。`;
    }
  </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？