Knowledge Diary

datepicker（デートピッカー）の設定方法（オプション・イベント）の解説！【jQuery】

Published：　Updated：

datepicker（デートピッカー）の設定方法（オプション・イベント）の解説！【jQuery】

こんにちは、Webデザイナーの 夢拓（MUHIRO）です。

datepickerはjQuery UIのライブラリの1つで、Webサイトにカレンダー形式の日付入力フィールドを簡単に追加できるプラグインです。
このツールを使用することで、ユーザーは手入力ではなくカレンダーから日付を選択できるようになり、入力ミスを減らすとともに、ユーザー体験を向上させることができます。
しかし、datepickerで設定した日付を取得、出力の方法については、特に初心者にとっては少し難しく感じられる場合があります。

この記事では、datepickerで設定した日付を取得する方法と、その使い方について詳しく解説していきます。

この記事はこんな方におすすめ！

  • Webデザイン初心者の方
  • jQeuryを勉強している方

それでは、どうぞ！

Index

［ CloseOpen ］

datepickerとは？

jQuery UIのライブラリの1つで、Webサイトにカレンダー形式の日付入力フィールドを簡単に追加できる機能です。

ユーザーが日付を選択しやすくなるため、入力ミスが減り、利便性が向上します。
また、datepickerはテーマや日付範囲の設定、フォーマットのカスタマイズなど、さまざまな調整が可能で、サイトのデザインや機能に合わせて柔軟に使用できます。

datepickerの導入方法

datepickerの導入は必要なライブラリを読み込むことが必要です。
以下の記述をHTMLのhead部分に記述します。

HTML

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

※バージョンは一例です。

日付入力用のinput要素を用意します。

HTML

<input type="text" id="datepicker" readonly>

datepickerを初期化するJavaScriptコードを記述する。

jQuery

$(function() {
  $("#datepicker").datepicker();
});

基本的な導入は以上になります。
以下の項目からオプションとイベントについて解説します。

datepickerで主要なオプション一覧

jQuery UIのdatepickerには多くのオプションがあります。主要なオプションは以下で紹介します。

altField（Selector、jQuery、または Element）
選択した日付を入力する別の要素を指定
altFormat（String）
altFieldに入力する日付のフォーマット
appendText（String）
日付入力欄の後に表示するテキスト
autoSize（Boolean）
入力欄のサイズを自動調整するかどうか
changeMonth（Boolean）
月をドロップダウンで選択できるようにするか
changeYear（Boolean）
年をドロップダウンで選択できるようにするか
dateFormat（String）
日付のフォーマット

jQuery：年/月/日 形式（例: 2024/11/06）

                    $('#datepicker').datepicker({
                        dateFormat: 'yy/mm/dd'
                    });

jQuery：ISO 8601形式（例: 2024-11-06）

                    $('#datepicker').datepicker({
                        dateFormat: 'yy-mm-dd'
                    });

jQuery：年/月/日 形式（例: 2024年11月06日）

                    $('#datepicker').datepicker({
                        dateFormat: 'yy年mm月dd日'
                    });

以下のような記号で指定します。
yy：4桁の年
y：2桁の年
mm：2桁の月
m：1桁の月（先頭のゼロなし）
dd：2桁の日
d：1桁の日（先頭のゼロなし）
MM：月の完全名
M：月の略称

dayNames（Array）
曜日の名前の配列

jQuery

                $("#datepicker").datepicker({
                    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
                });

                $("#datepicker").datepicker({
                    dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]
                });

注意：配列は日曜日から土曜日の順番に設定します。

dayNamesMin（Array）
曜日の最小限の名前の配列を設定します。

jQuery

                $("#datepicker").datepicker({
                    dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
                });

                $("#datepicker").datepicker({
                    dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"]
                });

注意：配列は日曜日から土曜日の順番に設定します。

defaultDate（Date、Number、または String）
デフォルトで表示する日付
duration（String または Number）
datepickerが表示される速度
firstDay（Number (0-6)）
週の最初の曜日を設定（0が日曜、1が月曜など）
isRTL（Boolean）
右から左に読む言語用のレイアウトにするかどうかを設定します。
maxDate（Date、Number、または String）
選択可能な最大（将来）の日付

jQuery：Date オブジェクトを使用する方法

                    $('#datepicker').datepicker({
                        maxDate: new Date(2023, 11, 31) // 2023年12月31日
                    });

jQuery：Number（数値）を使用する方法

                    $('#datepicker').datepicker({
                        maxDate: 7 // 今日から7日後
                    });

                    $('#datepicker').datepicker({
                        maxDate: +7 // 今日から7日後（+記号をつけても同じ）
                    });

                    $("#datepicker").datepicker({
                        maxDate: -7 // 今日から7日前
                    });

jQuery：String（文字列）を使用する方法 - 日付形式の文字列

                    $('#datepicker').datepicker({
                        maxDate: "2023/12/31" // 2023年12月31日
                    });

jQuery：String（文字列）を使用する方法 - 相対日付を表す文字列

                    $('#datepicker').datepicker({
                        maxDate: "+1M +1W" // 1ヶ月と1週間後
                    });

                    $('#datepicker').datepicker({
                        maxDate: "+1y" // 1年後
                    });

                    $('#datepicker').datepicker({
                        maxDate: "+2m" // 2ヶ月後
                    });

                    $('#datepicker').datepicker({
                        maxDate: "+3w" // 3週間後
                    });

                    $('#datepicker').datepicker({
                        maxDate: "+4d" // 4日後
                    });

                    $('#datepicker').datepicker({
                        maxDate: "+1y +1m +1w +1d" // 1年1ヶ月1週間1日後
                    });

注意：相対日付の文字列では、"y"は年、"m"は月、"w"は週、"d"は日を表します。大文字小文字は区別されません。

minDate（Date、Number、または String）
選択可能な最小（過去）の日付

入力は“maxDate”と同じ
monthNames（Array）
月の名前の配列

jQuery

                $("#datepicker").datepicker({
                    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
                });

                $("#datepicker").datepicker({
                    monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                });
monthNamesShort（Array）
月の短縮名の配列を設定します。

jQuery

                $("#datepicker").datepicker({
                    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
                });

                $("#datepicker").datepicker({
                    monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                });
nextText（String）
「次へ」ボタンのテキストを設定します。
numberOfMonths（Number または Array）
表示する月の数
prevText（String）
「前へ」ボタンのテキストを設定します。
selectOtherMonths（Boolean）
前後の月の日付を選択可能にするかどうかを設定します。
showButtonPanel（Boolean）
「Today」「Done」ボタンを表示するかどうか
showMonthAfterYear（Boolean）
年の後に月を表示するかどうかを設定します。
showOtherMonths（Boolean）
前後の月の日付も表示するかどうか
yearRange（String）
年の選択範囲
yearSuffix（String）
年の後に付ける文字列を設定します。


これらのオプションを使用することで、datepickerの外観や動作をカスタマイズできます。プロジェクトの要件に応じて適切なオプションを選択し設定することが重要です。

よく使うオプションの記述方法

上記のオプションを使ってよく使う記述をご紹介にします。

jQuery

$('#datepicker').datepicker({
    dateFormat : 'yy/mm/dd' ,
    monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] ,
    monthNamesShort : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] ,
    dayNames : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'] ,
    dayNamesMin : ['日','月','火','水','木','金','土'] ,
    yearSuffix : '年' ,
    showOtherMonths : true ,
    showMonthAfterYear : true ,
    selectOtherMonths : true ,
    isRTL : false ,
    numberOfMonths : 1 ,
    firstDay : 0 ,
    maxDate : 0 ,
    minDate : 0 ,
    nextText : '次へ' ,
    prevText : '前へ' ,
});

datepickerで主要なイベント一覧

jQuery UIのdatepickerには、以下の主要なイベントがあります。

onSelect(dateText, inst)
日付が選択されたときに発火します。

  • dateText ： 選択された日付の文字列
  • inst ： datepickerのインスタンス

jQuery

                $("#datepicker").datepicker({
                    onSelect: function(dateText, inst) {
                        console.log("選択された日付: " + dateText);
                    }
                });
onClose(dateText, inst)
datepickerが閉じられたときに発火します。

  • dateText ： 選択された日付の文字列
  • inst ： datepickerのインスタンス

jQuery

                $("#datepicker").datepicker({
                    onClose: function(dateText, inst) {
                        console.log("Datepickerが閉じられました");
                    }
                });
beforeShow(input, inst)
datepickerが表示される直前に発火します。

  • input ： 関連付けられた入力フィールド
  • inst ： datepickerのインスタンス

jQuery

                $("#datepicker").datepicker({
                    beforeShow: function(input, inst) {
                        console.log("Datepickerが表示される直前です");
                    }
                });
onChangeMonthYear(year, month, inst)
月や年が変更されたときに発火します。

  • year ： 表示されている年
  • month ： 表示されている月（0-11）
  • inst ： datepickerのインスタンス

jQuery

                $("#datepicker").datepicker({
                    onChangeMonthYear: function(year, month, inst) {
                        console.log("年: " + year + ", 月: " + month);
                    }
                });
beforeShowDay(date)
各日付が表示される前に発火し、日付の状態をカスタマイズできます。

  • date ： 評価される日付のDateオブジェクト
  • 戻り値: [boolean, string, string] （選択可能か、CSSクラス、ツールチップ）

jQuery

                $("#datepicker").datepicker({
                    beforeShowDay: function(date) {
                        var day = date.getDay();
                        return [(day != 0 && day != 6), '']; // 土日を無効化
                    }
                });


これらのイベントを使用することで、datepickerの動作をカスタマイズし、ユーザーのアクションに応じて特定の処理を実行することができます。

イベントのfunction()とは？

この場合の、function()は「コールバック関数」または「イベントハンドラ」と呼ばれます。
これらの関数は、特定のイベントが発生したときに実行されるように設定される関数です。

例えば、“onSelect”の場合は、onSelectイベントのコールバック関数またはイベントハンドラになります。
これらのイベントとコールバック関数を使用することで、特定のアクションに応じて処理を実行することができます。

コールバック関数のの中で“inst”パラメータを通じてこのインスタンスにアクセスできるため、datepickerの現在の状態を取得したり、その動作を動的に変更したりすることが可能になります。

関連記事 Related articles

この記事に関連するよくあるご質問

Q
イベントハンドラとは？
A

イベント（クリック、キー入力、マウスオーバーなど）が発生したときに実行される関数のこと。

Q
コールバック関数（callback function）とは？
A

プログラミングにおける重要な概念で、関数を別の関数に引数として渡すことを可能にする仕組みです。

コールバック関数は「後で呼び出される」関数で、ある処理が完了した後や特定のイベントが発生した時に実行されるよう設計された関数です。これにより、非同期処理やイベント駆動型のプログラミングが可能になります。

Q
インスタンス（instance）とは？
A

オブジェクト指向プログラミングにおいてクラスから生成された具体的なオブジェクトです。

クラスが設計図であるのに対し、インスタンスはその設計に基づいて作られた実体で、独自の属性（データ）と振る舞い（メソッド）を持ちます。

Q
readonlyとは？
A

この属性が設定された入力フィールドは、ユーザーが直接編集することができない「読み取り専用」の状態になります。

主にテキスト入力フィールドやテキストエリアに使用され、フォーム上で情報を表示しつつ、ユーザーによる変更を防ぐ目的で利用されます。
readonly属性が設定されたフィールドは、ユーザーがクリックしたりフォーカスを当てたりすることはできますが、キーボードからの入力や内容の変更はできません。

まとめ

いかでしたでしょうか？
今回の記事では、datepickerについて解説してきました。

今回のポイントをまとめますと、次のとおりです。

今回の記事のまとめ

  • datepickerの導入方法の解説
  • 主要なオプション一覧の解説
  • 主要なイベント一覧の解説

datepickerは非常に便利なツールで、使用方法を適切に理解し、プロジェクトの要件に合わせて適切にカスタマイズすることが重要です。
こちらを活用してユーザーフレンドリーなWebサイトを作っていきましょう！

最後までお読みいただきありがとうございました！

この記事を書いた人

夢拓（MUHIRO）/ Webデザイナー（フロントエンド）

大学中退して飲食業界に就職。飲食業界のブラックな部分を知り退職、その後無職。職業訓練校と独学で今勤めている制作会社に入社。 主にデザイン・構築をメインにUI/UXやアクセシビリティに考慮したWebサイト制作。スクラッチ案件多数、Shopifyテーマカスタマイズは90サイト以上の実績あり。

View Profile

免責事項

  • 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
  • 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
  • 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
  • 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
  • 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。