jquery DatePickerで土曜日と日曜日に違うCSSを適用させたい

ググっても情報が無かったので、調べてみました。このやり方で動いています。

まずは、土曜日と日曜日用のCSSを適当に用意します。

/*インラインで適当に背景色を選択*/
<style>
/*日曜日の背景を変える */
.ui-datepicker-sunday .ui-state-default {    
    background-image:none;
    background-color: #FFF0F5;
}
/*土曜日の背景を変える */
.ui-datepicker-saturday .ui-state-default {
    background-image:none;
    background-color: #F0F8FF;
}
</style>

土曜日が.ui-datepicker-saturdayで日曜日がui-datepicker-sundayです。

background-imageを指定しているのはデフォルトだと画像が背景に適用されるからです。色指定しても画像が前に来て変更できないってこと。

次にjQueryでこんなコードを書きます。

<script>
$(function() {
	$( "#datepicker" ).datepicker({
		    beforeShowDay: function(date) {
		        //日曜日
		    	if(date.getDay() == 0) {
			    	return [true,"ui-datepicker-sunday"];
			    //土曜日	
		    	} else if(date.getDay() == 6){
			    	return [true,"ui-datepicker-saturday"];
			    //平日
		    	} else {
			    	return [true];
		    	}			    	
		   }
	});	
});
</script>

beforeShowDayというのは、datepickerが日付を生成する前に呼ばれるイベントです。そのイベントにフックメソッドを用意します。

こいつの戻り値がちょっと変わっていて、配列で「選択可能かどうか」、「適用するCSSのセレクタ」、「カスタマイズしたツールチップ」という順番で戻り値を返さないといけないようです。どうしてオブジェクトじゃないの？ねぇ？どうして？その方が絶対分かりやすいのに！

なので、土曜日と日曜日には配列の２番目の要素にセレクタを、平日は何もしないので配列の１番目にtrueを入れて返します。これで土日で異なるスタイルが適用されます。

バージョンはjquery本体が1.4.3で、jquery-uiは1.8.6です。