【jQuery】datepicker()を使ってカレンダーの選択を行う!

カレンダーの選択を行うにはjQueryのdatepicker()メソッドを使用します。

jQueryのdatepicker()メソッドとはUIテキストフィールドにカレンダーを表示するメソッドであり、テキストフィールド内をクリックすると自動的にカレンダーが表示され、オプションを設定することで高機能なカレンダーを生成したり、表示したりすることができます。

例えば、Webページで日付を選択すると下記のような小さなカレンダーが表示される時があるかと思いますが、それらはdatepicker()で呼び出されています。

高機能なカレンダーを生成したり、表示したりすることができるということはユーザーにとって見やすくて使いやすい機能になりますので日時を入力する場合には進んでdatepicker()を使用しましょう。

今回は、jQueryのdatepicker()メソッドを使ってスクロール時に処理を行う方法について以下の内容で解説していきます。

⚫︎ オプション設定をしない状態でカレンダーの選択を行う場合
⚫︎ オプション設定をした状態でカレンダーの選択を行う場合

⚫︎ datepicker()の実践的な使い方
⚫︎ 日本語表記のカレンダーで選択を行う方法
⚫︎ 平日と祝日を区別したカレンダーで選択を行う方法

ハルトさん

今回はjQueryのdatepicker()メソッドでカレンダーの選択を行う方法について説明していきます。

さとみさん

お願いします!

datepicker()とは

datepicker()とは、UIテキストフィールドにカレンダーを表示するメソッドとなります。

datepicker()の書き方

datepicker()メソッドの書き方は下記となります。

datepicker()を使用するには「jQuery UI」を導入する必要があります。
そのため、専用のJavaScriptファイルとCSSファイルの2つのURLを指定するか、ファイルをダウンロードしましょう。

その後に$()でセレクタを指定し、datepicker()メソッドを呼び出すことで、カレンダーの選択を行うことができます。

パラメータ

⚫︎ オプション:
カレンダーを表示をカスタマイズしたい場合に指定する

datepicker()メソッドのパラメータにオプションを指定することで、カレンターをオリジナルのカレンダーを表示することができます。
しかし、オプションを設定しない場合はデフォルトの設定でカレンダーが表示されます。

またパラメータの各種オプションは下記となります。

オプション 説明
dayNames 曜日の名称(多い文字数で指定可能)
dayNamesMin 曜日の名称(中程度の文字数で指定)
dayNamesShort 曜日の名称(少ない文字数で指定)
monthNames 月名(多い文字数で指定可能)
monthNamesShort 月名(少ない文字数で指定可能)<
firstDay カレンダーの開始日時を指定する
(0を指定すると日曜日からで6を指定すると土曜日から)
dateFormat カレンダーの日付形式
(yy年mm月dd日とすると2020年10月18日と表示される)
showButtonPanel カレンダー最下部に「Today」「Done」ボタンを追加する
(true/falseで指定)
changeMonth 「月」をドロップダウンリストから選択できるようにする
changeYear 「年」をドロップダウンリストから選択できるようにする
showAnim カレンダーを表示する際のアニメーションを設定する
(show/slideDown/fadeInなどで指定)

カレンダーでの選択を行うサンプルコード

カレンダーでの選択を行うサンプルコードを紹介します。

オプション設定をしない状態でカレンダーの選択を行う場合

datepicker()にオプション設定をしない状態でカレンダーの選択を行ってみます。

sample.html

index.js

出力結果

オプション設定をしない状態でカレンダーの選択を行うとデフォルトの設定でカレンダーは表示されます。
そのため、カレンダーの表示が英語であり、選択すると年月日の表示が反対になって表示されます。

さとみさん

datepicker()をパラメータ無しで呼び出すとデフォルト設定でカレンダーが呼び出されるのですね!

ハルトさん

そうですね。
datepicker()をパラメータ無しだと英語圏(デフォルト設定)のカレンダー表示になりますので日本人にとっては見にくいですね。
そのためにパラメータにオプションを設定してあげると良いですよ。

オプション設定をした状態でカレンダーの選択を行う場合

datepicker()にオプション設定をした状態でカレンダーの選択を行ってみます。

sample.html

index.js

出力結果

オプション設定をした状態でカレンダーの選択を行うことでオリジナルのカレンダーを表示することができます。
そのため、カレンダーの表示を日本語で設定し、日本人でも見やすいカレンダーが表示されています。

さとみさん

datepicker()をパラメータ付きで呼び出すとオリジナルの設定でカレンダーが呼び出されるのですね!

ハルトさん

そうですね。
datepicker()をパラメータにオプションを設定することで、年月日の表示やカレンダーのアニメーションなどオリジナルで設定することができます。
そのため、ユーザにとって見やすくて、使いやすいカレンダーを設定しましょう。

datepicker()の実践的な使い方

ここで、datepicker()の実践的な使い方を紹介します。

予約画面

予約画面で日程を決める際にdatepicker()を使用することができます。

sample.html

index.js

出力結果

datepicker()でカレンダーを表示することで、予約日時を簡単に入力することができます。

さとみさん

予約画面などの日時を設定する画面ではdatepicker()は便利ですね!

ハルトさん

そうですね。
予約画面以外にもお問い合わせ画面などにも使用できますので、もし作成する場合には進んでdatepicker()を使用しましょう。

日本語表記のカレンダーで選択を行う方法

日本語表記のカレンダーで選択を行う方法について紹介します。

sample.html

index.js

出力結果

headタグに日本語表記用のjsファイルを指定することでオプションで細かい設定をすることなく簡単にカレンダーを日本語化できます。

平日と祝日を区別したカレンダーで選択を行う方法

平日と祝日を区別したカレンダーで選択を行う方法について紹介します。

sample.html

style.css

index.js

出力結果

要素にfirst-childとlast-childで指定することで土曜日は青色で日曜日は赤色のように日の要素に色をつけることができます。

今回のポイント

datepicker()でカレンダーの選択を行う

⚫︎ カレンダーの選択を行うにはjQueryのdatepicker()メソッドを使用する

⚫︎ datepicker()メソッドを使用するにはiQuery UIを導入する必要がある

⚫︎ datepicker()をパラメータ無しで呼び出すとデフォルト設定でカレンダーが表示される

⚫︎ datepicker()をパラメータありで呼び出すとオリジナルのカレンダーを表示することができる

⚫︎ datepicker()は予約画面やお問い合わせ画面などに使用することができる

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し