フォームなどの日付選択をカレンダー表示して、表示する方法　HTML＆JavaScriptのみ！

# 今回やりたいこと
先日、JavaScriptの記事を書きました。
今回もJavaScript関連の記事を書きます:writing_hand_tone1:



そして、今回やりたいことは、コチラ↓↓↓
カレンダーから、日付を出力させて、選択したら、
日付を取得して、それを表示させたい！:date:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/e54fcb0f-089f-5721-40be-70a4c7da9860.png)
カレンダーアイコンを押すと、カレンダーが出力されます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/3e600607-b639-1541-f77b-fc381c3337b8.png)

そして、選択した日付が、「選択された日付:」の横に出力されるUIを実現させたいです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/28cc1948-6735-c11b-fc07-e5c5c0f9c1f4.png)


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



▼今回参考にした記事

https://lorem-co-ltd.com/date-time-week/

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

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


## 手順
HTMLは、[inputで日付を選択させる方法](https://lorem-co-ltd.com/date-time-week/#:~:text=%E3%82%82%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82-,input%E3%81%A7%E6%97%A5%E4%BB%98%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95,-%E7%B6%9A%E3%81%84%E3%81%A6)を、参考にしました。

　JavaScriptは、「[// 日程指定の値取得](https://lorem-co-ltd.com/date-time-week/#:~:text=input%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%97%A5%E4%BB%98%E9%81%B8%E6%8A%9E%E3%81%AE%E5%80%A4%E3%82%92JavaScript%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)」の部分を参考にしました。

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


### ChatGPTが書いてくれた全体のコード（筆者ちょっと手直し済み）
ChatGPTに、コードを書いてもらったのですが、思い通りの挙動をしなかったので、いろいろ触ってみた結果、
value="{inputDate}"
の追記で上手く作動しました！:relaxed:

```
<!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" 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を、ｊｓファイルに書き込んだところ、「選択された日付:」の横に、カレンダーで選択した日付が出力されました！:v:

```
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const inputDate = document.querySelector("#inputDate");
        const dateResult = document.querySelector("#dateResult");
        inputDate.addEventListener("change", (e) => {
          const value = e.target.value;
          dateResult.innerHTML = value;
        });
    });
    </script>
    
```


### 補足説明

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

>
>1.HTML:
>* input要素のtypeをdateに設定し、value属性でデフォルトの日付（例えば、2024-01-01）を指定しています。（筆者追記　**※最初、value="{inputDate}"ではなく、value="2024-01-01"　になっていました。なので、上記のコードは手直ししたコードを載せています**）
>* ユーザーが日付を選択するための<input>要素と、その結果を表示する<span>要素を配置しています。
>
>2.JavaScript:
>* ページの読み込みが完了した際に、DOMContentLoadedイベントが発生し、指定された関数が実行されます。
>* inputDate変数に#inputDate要素を格納し、dateResult変数に#dateResult要素を格納します。
>* 初期値を表示するために、dateResult.innerHTML = inputDate.valueを設定しています。
>* inputDateのchangeイベントリスナーを追加し、ユーザーが日付を変更した際にその値を取得してdateResultに表示します。
>
>この設定により、inputフィールドにデフォルトの日付が設定され、その日付が表示されます。ユーザーが日付を変更すると、その値も更新されます。

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

## あとから知った、簡単なカレンダーの出し方
わたしは普段、業務でa-blog cmsというCMSを使っています。
今回のカレンダー表示に行き詰まったとき、[公式デベロッパー向けサイト](https://developer.a-blogcms.jp/document/)を見てみました。そして気づいたのですが、簡単なカレンダーの出し方がありました:astonished:！
それが、[日付選択カレンダー](https://developer.a-blogcms.jp/document/reference/builtinjs/control/date-picker.html):date:です。

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

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

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