JavaScript | カレンダー(date)の日付選択フォームの入力イベントを実装する方法

2022-02-01JavaScript,JavaScript イベント

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;
});