2012-03-13 18 views
1

現在、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ファイルを変更しようとしないでください。それでも、これは悪いデザインのようです。他のアイデア?

答えて

0

あなたがリストしたCSSは、そこに!importantが付いていると、デフォルトスタイルを上書きする必要があります。スタイルがデフォルトのものより後に来る限り、何も問題なくオーバーライドする必要があります。 JQuery UIはTDにインラインで何か入れてはいけません。

どこかの事例がありますか?おそらく、これは本当に簡単なことです。正しい日付でDOMのクラスを持っている限り、面白いものがないマイナーなCSSでなければなりません。

+0

マシュー、あなたが使用すると言ったときに、あなたは大事でした!私は以前これを試しましたが、私はセレクタとしてtd.holidayを使用していました。代わりに、私はtd.holidayを使っていたはずです。 ありがとう –