beforeShowDayでjquery datepicker CSSを変更します。

Question

私はbeforeShowDayを使用しており、カレンダーの特定の日にクラスspecialDayを割り当てました。これはうまくいきますが、クラスをスタイルする方法と、テーマローラーからのCSSが一般的にどのように働いているかを理解することができません。私は試しました：

td .specialDate { 
    background: #33CC66; 
} 

しかし、これはカレンダーの外観に影響しません。何か案は？

Answer 1

私は、特定の要素に適用されているスタイルをチェックするために、FirebugというJQuery UIを使用しているときはいつでも、再生する必要のあるCSS要素を簡単に特定できます。

Answer 2

私は同じ問題を抱えていましたが、幸いにも私は答えを見つけました。 日を無効にすると（ "false"に設定）、背景色を変更するクラス（ ".specialDate"）を割り当てることは有効ですが、別のスタイル付きアンカー（ "a"）があるため、 "td"アンカーに割り当てられたクラスをオーバーライドします。あなたの日付を選択してスタイルを変更するために有効になっている場合

だから、あなたはこのように、継承された「」アンカーを編集する必要があります。

.specialDate a { background: #33CC66 !important; } 

それはあなたが "を追加することが非常に重要です！重要な "（あなたが繰り返しを許しているならば）表示は他の設定を上書きするために表示します。

これは役に立ちます。

Answer 3

.specialDate span {background-color:#ff0000!important;} 

あなたはこのようなあなたのCSSスタイルを作成します

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important} 

Answer 4

透明効果を無効にしたい場合：

<style type="text/css"> 
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important; 
    background-color: #fffac2 !important; 
    color: #006633; 
    } 
</style> 

その後beforeShowDayオプションを使用してカレンダーにあなたのスタイルを追加します。

$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays); 


// ------------------------------------------------------------------ 
// highlightDays 
// ------------------------------------------------------------------ 
function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (SOME CONDITION TO DETERMIN SPECIAL DAY) { 
      return [true, 'specialDay']; 
     } 
    } 
    return [true, '']; 
} 

Answer 5

ここには、現在の日付または関連するテキストボックスの日付がハイライトされます。

スタイル：

.dateHighlight a { background: #58585a !important; } 

スクリプト：

var pickerDate; 
$("#pickerId").datepicker({ 
    // get the date to be highlighted; use today if no date 
    beforeShow: function() { 
     pickerDate = $("#pickerId").datepicker("getDate"); 
     if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0)); 
    }, 
    // add css class to the date 
    beforeShowDay: function(date) { 
     if (date.getTime() == pickerDate.getTime()) { 
      return [true, 'dateHighlight', ''] 
     } 
     return [true] 
    } 
}); 

Answer 6

UIカレンダーがテーマを持っている場合は、specialDate属性にbackground-imageを無効にする必要があります。

.specialDate a { 
    background-image: none !important; 
    background: #33CC66 !important; 
} 

Answer 7

使い方クリックすると、必要なCSSをすべて実行できます：

var checkin = $('.dpd1').datepicker() 
.on('click', function (ev) { 
     $('.datepicker').css("z-index", "999999999"); 
}).data('datepicker');