メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQuery UI datepickerの休日・祝日表示のカスタマイズを行う

カスタマイズ

先日jQuery UIのdatepickerについて日本語化・表示位置の調整・初期化の一括簡略化などを紹介しましたが、まだまだカスタマイズの余地がありますね。
今回は、週末(土曜・日曜)と祝日を選択不可にして、さらに表示文字色も一般的なカレンダーのように変更するカスタマイズ方法を紹介します。

祝日の定義

まずは祝日をJSONで定義します。
それに伴い、年月の表示幅も決めておくとJSONで定義した範囲外の休日/祝日が画面上では選択できないようになるので良いかと思います。

JSONの定義はキーが日付(YYYY/MM/DD)になるように定義して
後述のロジックでキーが存在するかどうか?判定できるように
JSONのフォーマットを工夫してあります。

休日/祝日の判定

.datepicker({ *** }); で初期化する所は通常と変わりません。

オプションにminDatemaxDateを指定するのも通常の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つ定義しています。

表示

f:id:ryoichi0102:20160606125455p:plain