今回やりたいこと

先日、JavaScriptの記事を書きました。
今回もJavaScript関連の記事を書きます

そして、今回やりたいことは、コチラ↓↓↓
カレンダーから、日付を出力させて、選択したら、
日付を取得して、それを表示させたい！

カレンダーアイコンを押すと、カレンダーが出力されます！

そして、選択した日付が、「選択された日付:」の横に出力されるUIを実現させたいです！

実装できるまで、1〜2時間はかかりました、やれやれ。。。
なかなか参考になるサイトを見つけられず、それで困りました。

▼今回参考にした記事

上記の記事とChatGPTを活用しました！
とくに、ChatGPTに助けていただいきました。
毎日ほんとにありがとうございます。感謝。

ChatGPTに感謝を捧げたところで、本題の手順に移ります。

手順

HTMLは、inputで日付を選択させる方法を、参考にしました。

　JavaScriptは、「// 日程指定の値取得」の部分を参考にしました。

しかし、コピペでどうも上手く行かなかったので、ChatGPTに手直ししてもらいました。

ChatGPTが書いてくれた全体のコード（筆者ちょっと手直し済み）

ChatGPTに、コードを書いてもらったのですが、思い通りの挙動をしなかったので、いろいろ触ってみた結果、
value="{inputDate}"
の追記で上手く作動しました！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
</head>
<body>
    <div>
        <label for="inputDate">日付を選択してください</label>
        <input type="date" name="inputDate" id="inputDate" value="{inputDate}" />
        <p>選択された日付: <span id="dateResult"></span></p>
    </div>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const inputDate = document.querySelector("#inputDate");
        const dateResult = document.querySelector("#dateResult");

        // 初期値を表示
        dateResult.innerHTML = inputDate.value;

        // 日付変更時に表示を更新
        inputDate.addEventListener("change", (e) => {
          const value = e.target.value;
          dateResult.innerHTML = value;
        });
    });
    </script>
</body>
</html>

上記の必要な部分のHTMLとJavaScriptで、「選択された日付:」の横に、カレンダーで選択した日付が出力されました！

a-blog cmsのフォームでは、送信データをメール本文に展開するために「field[]」のhidden定義が必要。<input type="hidden" name="field[]" value="inputDate" /> を追加することで、フォームの「inputDate」項目がシステムに登録され、メールテンプレート内の {inputDate} に値が正しく差し込まれます。これを忘れると確認画面には表示されても、メールには反映されません。

補足説明

けっこう理解不足なまま、進めてしまったので、ChatGPTからの説明を付け足しておきます。

1.HTML:

input要素のtypeをdateに設定し、value属性でデフォルトの日付（例えば、2024-01-01）を指定しています。（筆者追記　※最初、value="{inputDate}"ではなく、value="2024-01-01"　になっていました。なので、上記のコードは手直ししたコードを載せています）

ユーザーが日付を選択するための要素と、その結果を表示する要素を配置しています。

2.JavaScript:

ページの読み込みが完了した際に、DOMContentLoadedイベントが発生し、指定された関数が実行されます。

inputDate変数に#inputDate要素を格納し、dateResult変数に#dateResult要素を格納します。

初期値を表示するために、dateResult.innerHTML = inputDate.valueを設定しています。

inputDateのchangeイベントリスナーを追加し、ユーザーが日付を変更した際にその値を取得してdateResultに表示します。

この設定により、inputフィールドにデフォルトの日付が設定され、その日付が表示されます。ユーザーが日付を変更すると、その値も更新されます。

との説明をされましたが、よく分かりませんよね。
とりあえず、出力するには、input要素の理解が必要だと言う事がわかりました。input要素についてちゃんと勉強する課題ができました
そのうちまとめようと思います！

あとから知った、簡単なカレンダーの出し方1

わたしは普段、業務でa-blog cmsというCMSを使っています。
今回のカレンダー表示に行き詰まったとき、公式デベロッパー向けサイトを見てみました。そして気づいたのですが、簡単なカレンダーの出し方がありました！
それが、日付選択カレンダーです。

下記を1行書けば出力されました！
またの機会に活用したいなと思います

<input type="text" name="date" class="js-datepicker2" size="15" placeholder="2009-06-23" />

あとから知った、簡単なカレンダーの出し方2

コメントいただいたので、ここに載せておきます！

<label>
  日付を選択してください
  <input type='date' oninput='dateResult.textContent = this.value'>
</label>
<p>
  選択された日付: <span id='dateResult'></span>
</p>

下記のように出力されるようです！

まとめ

input要素についてちゃんと勉強する課題ができたので、しばらくそこを勉強しようと思います。
今回は、選択した日付を、同じページの別の箇所に表示すると言う挙動をJava scriptで実現しましたが（ChatGPTを用いたのでほぼ他力）、お問い合わせフォームなどでもinput要素がよく使われるので、確認画面等の別のページでも表示されるような動的な処理を自力でも実現&理解できるようになりたいです。