jQuery UI の Datepicker でカレンダーの土曜日/日曜日の背景色を変える方法

2017/02/15 ,

jQuery UI の Datepicker はカレンダー表示してテキストボックスへ日付を設定できる便利なプラグインです。前回は複数月のカレンダーを表示させる方法について紹介しました。

jQuery UI の Datepicker で複数の月のカレンダーを表示する方法
jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。前回のエントリーで、日本語環境に適用させる等、基本的な実装方法について紹介...

ただこの Datepicker のカレンダー、全ての曜日が同じ色なので感覚的に曜日を認識しづらいですよね。初期設定は日曜始まりですが、設定によっては月曜始まりに変更することもできます。

今回は、カレンダーを開いた時にすぐに曜日が分かるように、カレンダーの土曜日と日曜日の背景色を変更する方法について紹介します。この設定は、Datepicker の標準オプションで設定できる項目ではないのですが、スタイルシートを上手く利用すれば背景色を設定することができるようになります。

Datepicker のカレンダーの土曜日/日曜日の背景色を変える

まず HTML と Javascript は一番シンプルな構成としておきます。

ポイントはスタイルシートの設定方法にあり

背景色の設定の鍵はスタイルシートにあります。このカレンダーは table タグを用いて構成されています。カレンダーはデフォルト状態のままなので、日曜から始まり土曜で終わる状態になっています。つまり、行内の最初のセルが日曜で、行内の最後のセルが土曜日となるので、次のように「:first-child」と「:last-child」の擬似クラスを使ってあげると上手く仕掛けることができます。

それでは実際にスタイルシートを反映したカレンダーの動作を確認してみましょう。

カレンダーの土日の背景色を変更するサンプル

日付
↑このテキストボックスをクリックしてください。

どうでしょうか。土曜日と日曜日の色は変わっていましたか?日曜始まりのカレンダーの場合はこれで問題ありませんが、月曜日始まりのカレンダーを設定した場合、この「:first-child」と「:last-child」の擬似クラスを利用する方法では適用できません。

こちらについては、別途「月曜始まりのカレンダーを表示する方法」として紹介する際に説明する予定です。

以上、jQuery UI の Datepicker で、日曜始まりのカレンダーにおける土曜日/日曜日の背景色を変更する方法でした。

PAGE TOP ↑