在 jQuery UI 日期选择器中标记选定的日期

Question

我正在使用 jQuery UI 的日期选择器 (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 所指出的，必须将样式添加到 a 元素而不是 td 元素。我还必须将 jQuery UI 生成的类名添加到 a 元素中，以使我的 css 规则比 CSS cascading rules 的默认规则更重要。最后一个技巧是使用background 而不是background-color 来覆盖所使用的jQuery UI 主题图像。

Answer 2

你所拥有的应该可以工作，you can test it here。但是，根据您的主题，您可能需要调整 CSS，因为 <td> 中的 <a> 有自己的背景，并且该类将应用于 <td>。