こんにちは、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で日付選択時のイベントを取得して処理を実行する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。