ITコラム

jQuery

2018.05.02

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

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

1. datepicker のオプション

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

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

▲目次へ戻る

2. datepicker のオプションの書き方

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

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

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

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

▲目次へ戻る

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…など）