Mark selected days in jQuery UI datepicker

Question

I am using jQuery UI datepicker (http://docs.jquery.com/UI/Datepicker).

It seems like you can mark certain days by providing a function beforeShowDay(http://docs.jquery.com/UI/Datepicker#event-beforeShowDay). But I can not get CSS for this. I would like to make the background green for several days.

This is the JavaScript I have:

$(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, '', ""];
}

And this is css:

.markedDay {
    background-color: green;
}

But nothing changes. What am I doing wrong?

Answer 1

It did

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

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

a, td, . jQuery UI , css , CSS , background background-color jQuery UI.

Answer 2

, . CSS, <a> <td> , <td>.