9

私はクラスを使用しており、カレンダーの特定の日にbeforeShowDay割り当てています。specialDayこれは正常に動作しますが、クラスのスタイルを設定する方法と、テーマ ローラーの css が一般的にどのように機能するかを理解するのに苦労しています。私が試してみました：

td .specialDate {
    background: #33CC66;
}

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

4

7 に答える 7

15

私は同じ問題を抱えていましたが、幸いなことに答えが見つかりました。日を無効にすると (「false」に設定)、クラス (「.specialDate」) を割り当てて背景色を変更できますが、日付が有効になっている場合は有効ではありません。 「td」アンカーに割り当てられたクラスをオーバーライドします。

したがって、日付を選択してスタイルを変更したい場合は、継承された「a」アンカーを次のように編集する必要があります。

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

他の設定を上書きするために、「 !important」(繰り返しを許していただけるなら) という指示を追加することが非常に重要です。

これが役立つことを願っています！

于 2009-12-03T12:30:01.113 に答える
5

次のように CSS スタイルを作成します。

<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, ''];
}
于 2011-05-10T21:44:19.513 に答える
1 
.specialDate span {background-color:#ff0000!important;}

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

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important}
于 2010-09-02T00:07:08.743 に答える
1

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

.specialDate a { 
    background-image: none !important;
    background: #33CC66 !important;
}
于 2012-10-22T18:08:02.783 に答える
0

クリックで使用すると、必要なすべての css を実行できます。

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');
于 2015-05-18T09:21:32.367 に答える
0

これは、現在の日付または関連するテキスト ボックスの日付を強調表示するビットです。

スタイル：

.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]
    }
});
于 2012-09-26T21:59:05.920 に答える
0

JQuery UI を使用しているときはいつでもFirebugを使用して、特定の要素に適用されているスタイルをチェックします。これにより、どの CSS 要素を操作する必要があるかを簡単に特定できます。

于 2009-08-24T20:12:42.440 に答える