【jQuery】【Datepicker】日付選択時のイベントを取得して処理を実行する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryのDatepickerを使って、カレンダーの日付を選択した際に発火するイベントを取得して、指定した処理を実行する方法をご紹介しています。

Datepickerで日付を選択したときにある処理を実行したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

Datepickerで日付選択時のイベントを取得するには

Datepickerで日付選択時のイベントを取得するにはonSelect関数を使用します。onSelect関数は、カレンダーの日付が選択された場合に呼び出される関数です。パラメータとして選択された日付とDatepickerのインスタンスを受け取ることができるため、選択された日付やDatepickerのインスタンスを使って独自の処理を組むことができます。

onSelect関数で日付が選択された場合のイベントを取得するには、Datepickerを初期化する際のオプションに関数を指定します。

HTML

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<!-- HTML Layout -->
<div id="datepicker"></div>

jQuery

$("#datepicker").datepicker({
    onSelect: (date, inst)=>{
        //ここに日付選択時の処理を記述
    }
});

以上で日付選択時のイベントを取得することが可能となります。DatepickerはjQueryとjQuery UIのライブラリを使用するため、初期化前に関連ファイルを読み込む必要があります。私もそうでしたが、jQueryを使い始めたばかりの頃は本体ファイルの読み込みを忘れることが多々ありました。jQueryが動かない場合は本体ファイルが読み込まれていない可能性が高いため、焦らずにソースをじっくりと眺めてみてくださいね。

参考：https://api.jqueryui.com/datepicker/#option-onSelect

onSelectのパラメータについて

前項で触れた内容となりますが、もう少し詳しくご説明します。

DatepickerでonSelect関数を実行すると、パラメータとして下記のデータを受け取ることができます。

パラメータ名	説明
date	選択した日付の文字列（例：2022/08/08）
inst	Datepickerインスタンス

dateは選択した日付をテキストの文字列です。取得したdateパラメータをDateクラスに渡すことで年月日曜日情報等詳細を取得することができます。もう一つのinstでは、選択日付の他に下記のようなDatepickerのインスタンス情報を保持しています。（2022年8月8日選択時の情報です）

currentDay: 8
currentMonth: 7
currentYear: 2022
dpDiv: Object { 0: div.ui - datepicker - inline.ui - datepicker.ui - widget.ui - widget - content.ui - helper - clearfix.ui - corner - all, length: 1 }
drawMonth: 7
drawYear: 2022
id: "datepicker"
inline: true
input: Object { 0: div#datepicker.hasDatepicker, length: 1 }
selectedDay: 8
selectedMonth: 7
selectedYear: 2022
settings: Object { onSelect: onSelect(date, inst) }
yearshtml: ""
_keyEvent: false

実行結果を確認すると、選択日付の他にインスタンスの情報（idやclass属性等）の情報を取得しています。JavaScriptでは、月の情報は0から始まるため、8月の場合は7となっています。

選択された日付の取得では、基本的に日付テキスト（パラメータのdate）を使い、インスタンスが持つ情報が必要な場合はインスタンス情報（パラメータのinst）を使うなど用途に応じた使い分けができますね。

最後に

Datepickerはいくつかファイルを読み込んで数行記述するだけで日付選択のカレンダーを実装できる便利なライブラリです。HTML5ではinput type="date"を使ってカレンダーを表示することも可能ですが、現状ではDatepickerの方が扱いやすい印象です。ドキュメントも読みやすいので、日付処理が必要な場合はDatepickerを使ってみてくださいね。

参考：https://api.jqueryui.com/datepicker/

以上、jQueryのDatepickerで日付選択時のイベントを取得して処理を実行する方法のご紹介でした！