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

JavaScript,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タグの「.output」は動作テストでの出力用エリアになります。

<input type="date" name="date">
<p id="output">Change the Date</p>

querySelector()メゾットを使って日付フォームを取得しています。
カレンダーフォームが1ページにひとつであれば、input[type=’date’] や input[name=’date’] でも問題ありません。

addEventListener()に「change」を指定して、ユーザーによる値の変更をトリガーにイベントを設置します。

日付選択フォーム(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;
});

JavaScript,JavaScript イベント

Posted by Yousuke.U