今回やりたいこと
先日、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" 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を、ｊｓファイルに書き込んだところ、「選択された日付:」の横に、カレンダーで選択した日付が出力されました！
<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からの説明を付け足しておきます。
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要素についてちゃんと勉強する課題ができました
そのうちまとめようと思います！
あとから知った、簡単なカレンダーの出し方
わたしは普段、業務でa-blog cmsというCMSを使っています。
今回のカレンダー表示に行き詰まったとき、公式デベロッパー向けサイトを見てみました。そして気づいたのですが、簡単なカレンダーの出し方がありました
！
それが、日付選択カレンダーです。
下記を1行書けば出力されました！
またの機会に活用したいなと思います
<input type="text" name="date" class="js-datepicker2" size="15" placeholder="2009-06-23" />
まとめ
input要素についてちゃんと勉強する課題ができたので、しばらくそこを勉強しようと思います。
今回は、選択した日付を、同じページの別の箇所に表示すると言う挙動をJava scriptで実現しましたが（ChatGPTを用いたのでほぼ他力
）、お問い合わせフォームなどでもinput要素がよく使われるので、確認画面等の別のページでも表示されるような動的な処理を自力でも実現&理解できるようになりたいです
。