現在、jQuery UIのdatepicker内の特定の日付のCSSを変更しようとしています。日付が休日と見なされている場合(つまり、指定された日付の配列内の日付と一致する場合)、デフォルトの画像を削除し、その要素に小さな微調整を追加したいと思います。私は(週末は週末のクラスでマークされている)のようなbeforeShowDayコールバック関数を使って、日付と考え休日を「休日」クラスを追加します。Jquery UI - Datepicker onChangeMonthYear
beforeShowDay: function(oDate) {
mResult = oHolidays.fnLookupDate(oDate);
if (mResult != null) // if the date matched a holiday, mResult is the description
return [false, 'holiday', mResult];
else if (oDate.getDay() == 0 || oDate.getDay() == 6) // weekends
return [false, 'weekend'];
else // normal day
return [true, ''];
}
理論的には、各休日のTDSにクラスを適用すると、私を許可する必要があります日付ピッカーの各休日にどんなスタイリングをしたいかを指定します。しかし、クラスで使用しているスタイリングは実際には表示されません。 UIスタイリングが優先されます。 もちろん、CSSのスタイルをUIのcssファイルから削除することで問題を解決することはできますが、それはデザインの観点からは本当に悪いアプローチです。ここで私は指定CSS(!指定重要なのは、何も変更していない)である:
td.holiday {
background-color: #CC9900;
background-image: none;
color: #990000;
font-weight: bolder;
}
私は日付ピッカーによって生成されたTDノード内のAノードにインラインスタイルとしてCSSを適用することによって、「それをハック」してみました(より具体的な、より多くの内部規則は、より高いCSSの優先順位を持っている)、このような何か行う必要があります。日付ピッカーが表示される前にonChangeMonthYearがこの機能を実行するようだ
onChangeMonthYear: function(dateText, inst) {
$('.holiday').children('a').css({'background-color': 'blue', 'background-image': 'none',
color: '#990000', 'font-weight': 'bolder'});
}
を。そしてこれが起こるので、datepickerのCSSは私がやろうとしていたものを上書きします。 Firebugでdatepickerを開いた状態でこのコードを実行すると、正常に動作します。
月が表示された後で、datepickerのCSSを変更するには、.css()を使用する必要がありますか?私は、jQueryのUI CSSやJSファイルを変更しようとしないでください。それでも、これは悪いデザインのようです。他のアイデア?
マシュー、あなたが使用すると言ったときに、あなたは大事でした!私は以前これを試しましたが、私はセレクタとしてtd.holidayを使用していました。代わりに、私はtd.holidayを使っていたはずです。 ありがとう –