在jQuery UI datepicker中標記選定日期

Question

我正在使用jQuery UI的datepicker（http://docs.jquery.com/UI/Datepicker）。

聽起來應該可以通過提供beforeShowDay函數來標記某些日子（http://docs.jquery.com/UI/Datepicker#event-beforeShowDay）。 但我無法為此獲得CSS。 我想讓背景變綠了幾天。

這是我迄今為止的JavaScript：

$(function() {    
    $('.date').datepicker({
        dateFormat: 'yy-mm-dd',
        firstDay: '1',
        showOtherMonths: 'true',
        beforeShowDay: daysToMark
    });
});

function daysToMark(date) {
    if (date.getDate() < 15) {
        return [true, 'markedDay', ""];
    }

    return [true, '', ""];
}

這是css：

.markedDay {
    background-color: green;
}

但沒有變化。 我究竟做錯了什么？

Answer 1

這樣做了

.markedDay a.ui-state-default {
    background: green !important;
}

.markedDay a.ui-state-hover {
    background: red !important;
}

如Nick Craver所指出的，不得不將樣式添加到元素而不是td元素。 我還必須將jQuery UI生成的類名添加到a元素中，以使我的css規則比根據CSS級聯規則的默認值更重要。 最后一招是使用background而不是background-color來覆蓋使用的jQuery UI主題圖像。

Answer 2

你有什么應該工作， 你可以在這里測試 。 但是，根據您的主題，您可能需要調整CSS，因為<td>的<a>具有它自己的背景，並且該類將應用於<td> 。