jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説

表示されるカレンダーの曜日を変更する

　
デフォルトで表示されるカレンダーは、日曜日始まりですが、これを月曜日始まりなどに変えたい場合の設定方法です。
　

　
デフォルト設定では「0（日曜日）」となっています。
これを変更したい場合は「1（月曜日）」「2（火曜日）」．．．と変更します。
　
　

表示されるカレンダーの数を増やす

　
表示されるカレンダーの数を増やす場合は、下記の通り「numberOfMonths」を指定します。
　

　

　
また、下記の様に配列で指定することもできます。
「numberOfMonths: [ 2, 3 ]」
この場合は「2行に 3つずつのカレンダーを表示」になります。
　

カレンダーに他の月を表示し、選択できるようにする

　
「カレンダーに他の月を表示し」と文章で書いても分かりにくいですが、下記の様に、前月と翌月の一部も表示して、その部分も選択できるようにする、という処理です。
　

　

　
「showOtherMonths: true,」が、他の月も表示する設定です。
「selectOtherMonths: true 」が、上記で表示された部分を選択可能にする設定です。
　
　

カレンダーの年月の指定をプルダウンにする

　
これまた文章で書いても分かりにくいですが、通常カレンダーの選択は、右左をクリックする方式で、1ヵ月ずつしか移動できませんが、これをプルダウンで選択し、大きく年月を変更することを可能とする処理です。
　

　

　
「changeYear: true,」が、年のプルダウンを表示する設定です。
「changeMonth: true」が、月のプルダウンを表示する設定です。
　
また、プルダウンで表示される「年」のリストの範囲を指定したい場合は、下記の様に「yearRange」を指定します。
「yearRange: "2015:2020"」
　
月の範囲を指定するオプションはなさそうです。
　
　

カレンダーを表示したときに表示する日時を指定する

　
特に日時を指定をしない場合は、最初に表示されるのはカレンダーを表示している当日の日付が選択された状態で表示されます。
　
ですが、具体的に日時を指定して表示させることもできます。
　

　
注意点としては、「月」の指定で「-1」をする必要があるところです。
これは、「月」が「0」から始まるためです。
　
「12月」を指定するときは「11」を指定すれば足りるのですが、「12-1」と指定する方が分かりやすいだろうと思います。
　
　

選択できるカレンダーの範囲を指定する

　
初期設定では選択できるカレンダーの範囲は決まっていませんが、入力を受け付ける日付の範囲が決まっている場合は、表示されるカレンダー自体にその範囲を指定できると入力する側も分かりやすくていいでしょう。
　
具体的な年月を指定する方法は以下の通りです。
　

　
表示は以下のようになります。
「月」の指定は、前項と同じく「-1」する必要があります。
　

　
　
現在の日付を基に、前後何日を対象にするかを指定する方法は以下の通りです。
　

　
「minDate」「maxDate」に指定する方法は同じですが、パラメータとして指定する値を、具体的な日時を指定するか、相対的な日数を指定するか、が違います。
　

　
　

入力エリアの右側にボタンを設置する

　
入力エリアをクリックするとカレンダーが表示されますので、どれくらい役に立つのか分かりませんが、入力エリアの右側に「カレンダーを表示」といったボタンを追加したい場合に使用します。
　

　

　
「showOn: "both"」でボタンを表示し、「buttonText: "カレンダーを表示"」で表示する文言を指定します。
　
　

「Today」に戻るボタンとカレンダーを閉じるボタンを設置する

　
カレンダーを他の月に移動させたとき、素早く「今日（Today）」に戻るためのボタンと、表示したカレンダーを閉じるボタンを設置するときに使用します。
　

　

　
「showButtonPanel: true」でボタンパネルを表示し、「currentText: "今日",」「closeText: "閉じる"」で、「Today」と「Done」の個所に表示する文言を指定します。
　
　

カレンダーに年初から何週目なのかを表示する

　
必要になる場面があまり思いつきませんが、カレンダーの左側に、年初から何週目なのか、を表示することを有効にするための設定です。
　

　

　
年間の週を計算する方法の指定は、下記の様に行います。
この設定がデフォルトの設定内容です。
「calculateWeek: jQuery.datepicker.iso8601Week」
　
ちなみに、「ISO 8601」の定義では、年初の 1週間目となる条件は、以下の通りのようです。
・月曜日が週の始まり
・年の最初の木曜日が来る週が 1週間目
　
つまりは、こういうことでしょうかね。
・1週間は月曜日で始まり
・日数が 4日以上（過半数を超えた）の週が 1週間目
　
ウィキペディアには、下記の様に書いてありますね。
「『その年の第 1週は、1月4日を含む週である。』としても、基準としては等しい。」
　
いまいちピンとこないルールです。
　
　

1つの画面内に複数のカレンダーを利用する入力フォームがある場合の対応

　
1つの画面内に複数の日付を入力する項目があり、それぞれに「DatePicker」を設置したい場合の対応方法です。
　
3行目の「"#datepicker"」だった部分を「".datepicker"」に変更しています。
　

　
これは、DatePickerの設定ではなく、jQuery全般の設定で、「#」での指定は「ID」を指定するもので、「.」での指定は「Class」を指定するものです。
　
そのため、入力ボックス側は、下記の様に「id="datepicker"」で指定していた個所を「class="datepicker"」に変更します。
　

　
ちなみに、HTMLの仕様ですが、IDは 1ページ内に同じ IDをもつ要素を持つことはできませんが、Classは複数持つことができます。
（1ページ内に同一の IDが複数ある場合は、一番最初の IDだけが有効になる場合が多いようです。）
　
　

jQuery UI DatePickerに時間を入力する機能を追加する

　
jQuery UI DatePickerの標準的な機能では、時間を入力する機能はありませんが、アドオンを追加することで簡単に時間を入力することができるようになります。
　
設定方法は、やや長くなりますので、下記に別記事として書きましたので参照してください。
jQuery UI DatePickerに時間を入力できる機能を追加する方法解説
　
　

jQuery UI DatePickerのまとめ

　
jQuery UI DatePickerは、簡単な設定で実装することができるデイトピッカーです。
また、あらかじめ用意された複数のテーマがあり、様々なオプションもありますので、多くのニーズを満たすことができるデイトピッカーと言えるでしょう。
　
かなりいろいろなオプションを紹介しましたが、紹介しきれていないオプションもありますので、設定によってまだまだ使い方は広がるでしょう。
　
また、デイトピッカーは、jQuery UI DatePickerだけでなく、他にも提供されているものもありますので、jQuery UI DatePickerで望む機能が実装できない場合は、他のデイトピッカーを探すのもいいでしょう。