2010年11月20日

jQuery:UI datepickerの週末に色をつける

jQuery UI datepickerの日付に任意の色をつけるには、beforeShowイベントとonChangeMonthYearイベントで、日付の文字色を変更する。※イベントが発生した時点で色付けしようとしてもダメなので、setTimeoutで処理を遅延して実行させる。

function setWeekendColor() {
var tr = $("table.ui-datepicker-calendar > tbody > tr");
for (var i = 0; i < tr.length; i++) {
if (tr[i].firstChild.firstChild.style)
tr[i].firstChild.firstChild.style.color = "red"; //sunday
if (tr[i].lastChild.firstChild.style)
tr[i].lastChild.firstChild.style.color = "blue"; //saturday
}
}
$.datepicker.setDefaults({
beforeShow: function () {setTimeout(setWeekendColor, 100);},
onChangeMonthYear: function () {setTimeout(setWeekendColor, 100);}
});


posted by 忘却の達人 at 09:09| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。