🐣 カレンダーから日付を取得して現在の時間との差を表示する処理
javascript
作成日： 2021/05/08
0

～～～HTML～～～
↓↓↓↓↓↓↓↓↓↓↓↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>あと何日？</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
  </head>

  <body>

    <input type="date" value="" id="dateSet" />
    <input type="button" value="検索" id="dateSearch" />
    <p id="diffTime"></p>

    <script src="./main.js"></script>
  </body>
</html>

～～～javascript～～～
↓↓↓↓↓↓↓↓↓↓↓↓

const dateSet = document.getElementById("dateSet");
const dateSearch = document.getElementById("dateSearch");
const diffTime = document.getElementById("diffTime");
// diffTimeを非表示にしている。
diffTime.style.display = "none";

const func2 = function () {
  // 現在の時間を取得
  let nowtime3 = moment();
  //カレンダーから日付をmoment.jsで使用出来るように取得
  const dateSetValue = moment(dateSet.value);
  //現在の時間とカレンダーから取得した日付の差を秒単位で取得する。
  const num2 = dateSetValue.diff(nowtime3, "seconds");
  //   取得した時間を日,時間,分,秒で表示するように変換
  let timeD = Math.floor(num2 / (24 * 60 * 60));
  let timeH = Math.floor((num2 % (24 * 60 * 60)) / (60 * 60));
  let timeM = Math.floor(((num2 % (24 * 60 * 60)) % (60 * 60)) / 60);
  let timeS = ((num2 % (24 * 60 * 60)) % (60 * 60)) % 60;
  let timeDHMS = timeD + "日" + timeH + "時間" + timeM + "分" + timeS + "秒";
  // 変換した時間を書き込む。
  diffTime.innerHTML = dateSet.value + "まで後" + timeDHMS;
};

// 検索ボタンを押した時にdiffTimeが表示されるようにする。
dateSearch.addEventListener("click", () => {
  diffTime.style.display = "block";
});
// 時間の計算を1秒ごとに行う処理
setInterval(func2, 1000);
taku