jQuery【 jQuery UI 】datepicker のオプションと設定方法

jQuery UI の datepicker を利用すると 容易にカレンダーを表示することができます。
そして、datepicker には 様々なオプションが用意されており、オプションを設定することによって 表示するカレンダーをカスタマイズできます。
今回は、datepicker の 主なオプションについて紹介します。
（ カレンダーの表示についてはjQuery【 jQuery UI 】datepicker でカレンダーを表示するサンプルをご参照下さい。）

目次

１．datepicker のオプション
２．datepicker のオプションの書き方
３．datepicker のオプション一覧

１．datepicker のオプション

　
datepicker を使用してカレンダーを表示させる場合、オプション無しで「 $(“#datepicker”).datepicker(); 」のような記述をすると 次のようなカレンダーが表示されます。

　
これだけでも十分かと思いますが、datepicker には 様々なオプションが用意されていて、オプションを設定することで 曜日を日本語で表示したり、カレンダーを複数月分表示させたりすることができます。

▲目次へ戻る

　

２．datepicker のオプションの書き方

　
datepicker のオプションを設定する場合は、次のように記述します。

$(“#datepickerId”).datepicker({
　　オプション名１ ： “値１” ，
　　オプション名２ ： “値２” ，
　　オプション名３ ： “値３”
});

次のようにオプションを設定すると、下のようなカレンダーが表示されます。

$("#datepickerId").datepicker({
  changeMonth: true,
  numberOfMonths: 3
});

▲目次へ戻る

　

３．datepicker のオプション一覧

　
datepicker は、主に次のようなオプションがあります。

showButtonPanel	値：true / false（初期値:false） カレンダー最下部に「Today」「Done」ボタンを追加する
closeText	値：String（初期値:”Done”） showButtonPanelをtrueに設定すると表示される右下のボタンの表示名を変える
appendText	値：String（初期値:””） 入力フォームの後ろに表示するテキストを指定する
changeMonth	値：true / false（初期値:false） 「月」をドロップダウンリストから選択できるようにする
changeYear	値：true / false（初期値:false） 「年」をドロップダウンリストから選択できるようにする
altField	値：HTML要素（初期値:””） 取得した日付を指定の要素に出力する
altFormat	値：String（初期値:””） altFieldの要素に指定の日付フォーマットを設定する
showOn	値：String（初期値:”focus”） 「button」「focus」のどちらかでカレンダーの表示を選択できる
buttonImage	値：String（初期値:””） showOn オプションを設定した場合に、画像ボタンを表示できる
buttonImageOnly	値：true / false（初期値:false） false の場合は、buttonImage で設定した画像がボタン上に表示される
buttonText	値：String（初期値:”…”） showOn オプションで”button”に設定した場合の ボタンの表示文字列を設定する
calculateWeek	値：Function（初期値:jQuery.datepicker.iso8601Week） 年間の週を計算する方法を指定する
dateFormat	値：String（初期値:”mm/dd/yy”） 指定の日付フォーマットで出力する
duration	値：String / Number（初期値:”normal”） カレンダーの表示タイミングを指定する「Fast / slow / normal」かミリ秒が使える
firstDay	値：Number（初期値:0） 週の最初の曜日を設定できる（0が日曜日で1が月曜日）
showOtherMonths	値：true / false（初期値:false） 前後の月の日付も一緒に表示するかどうかを設定する
showAnim	値：String（初期値:”show”） カレンダーを表示する際のアニメーションを設定する（show / slideDown / fadeIn…など）

▲目次へ戻る