【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のパラメータについて

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

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

パラメータ名説明
date選択した日付の文字列(例:2022/08/08)
instDatepickerインスタンス

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

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

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

最後に

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

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

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら