JavaScript | カレンダー（date）の日付選択フォームの入力イベントを実装する方法
JavaScriptを使ってHTML5から実装されているカレンダーの日付選択フォーム<input type="date">の入力をトリガーにしたイベントの実装方法を紹介しています。
日付選択フォームの入力イベント
JavaScriptのaddEventListener()メゾットを使ってイベント発火時に日付選択フォームの値を取得しています。
See the Pen JavaScript | Select Menu Event by yochans (@yochans) on CodePen.
HTMLはシンプルな日付選択フォーム<input type="date">を置いています。
<p>タグのclass名「.output」は動作テストでの出力用エリアになります。
<input type="date" name="date">
<p id="output">Change the Date</p>querySelector()メゾッドを使って日付フォームを取得しています。
カレンダーフォームが1ページにひとつであれば、input[type='date'] やinput[name='date']でも問題ありません。
addEventListener()に「change」を指定して、ユーザーによる値の変更をトリガーにイベントを設置します。
日付選択フォーム<input type="date">から取得可能な値は「2021-12-01」のような形式になります。
必要に応じて利用する形式に変換します。
let date = document.querySelector(`input[type='date'][name='date']`);
date.addEventListener(`change`, function () {
document.querySelector(`#output`).innerHTML = date.value;
});以下は上記サンプルコードのアロー関数版になります。
let date = document.querySelector(`input[type='date'][name='date']`);
date.addEventListener(`change`, () => {
document.querySelector(`#output`).innerHTML = date.value;
});