カスタマイズ
先日jQuery UIのdatepickerについて日本語化・表示位置の調整・初期化の一括簡略化などを紹介しましたが、まだまだカスタマイズの余地があります。
今回は、週末(土曜・日曜)と祝日を選択不可にして、さらに表示文字色も一般的なカレンダーのように変更するカスタマイズ方法を紹介します。
祝日の定義
まずは祝日をJSONで定義します。
それに伴い、年月の表示幅も決めておくとJSONで定義した範囲外の休日/祝日が画面上では選択できないようになるので良いかと思います。
JSONの定義はキーが日付(YYYY/MM/DD)になるように定義して
後述のロジックでキーが存在するかどうか？判定できるように
JSONのフォーマットを工夫してあります。
休日/祝日の判定
.datepicker({ *** }); で初期化する点は通常と変わりません。
オプションにminDateとmaxDateを指定するのも通常のdatepickerのオプションと変わりませんね。
休日・祝日の判定はbeforeShowDayのfunciton定義で行います。
$.datepicker.formatDate('yy/mm/dd', day);で表示しようとしている日付をYYYY/MM/DDに成形します。
そして、
- 祝日として存在する場合
- 日曜の場合
- 土曜の場合
- それ以外(平日)の場合
をif-elseで変数名daySettingsに設定しています。
なお、beforeShowDayは配列で3値を持つ値を返す必要があり、それぞれ
- 第1引数はboolean : trueはその日付が選択可となる。
- 第2引数はstring : cssへ追加するスタイルが指定できます。
- 第3引数はstring : tooltipが
第2,3引数は特に何もない場合は空文字""を設定してあげましょう。
休日/祝日の表示
datepickerでは下記のようなタグが各日付の表示用に自動的に生成されます。
- 選択可能な平日は
<td>配下に<a class="ui-state-default"> - 選択可能な週末は
<td class="ui-datepicker-week-end">配下に<a class="ui-state-default"> - 選択不可に設定した平日は
<td class="ui-datepicker-unselectable ui-state-disabled">配下に<a class="ui-state-default"> - 選択不可に設定した週末は
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled">配下に<a class="ui-state-default">
まとめるとこんな感じです。
これを利用して、土曜は青に、日曜を赤に、祝日を赤で表示させます。
なお、上述のように選択可/不可によって子タグが<a>か<span>か変わるので、
先の処理で土日祝を選択可/不可どちらに設定したかによってCSSの記述が変わってきます。
下記は両方に対応するよう2つ定義しています。
表示
