Marquer les jours sélectionnés dans jQuery UI datepicker

Question

J'utilise le programme datepicker de jQuery UI (http://docs.jquery.com/UI/Datepicker).

Il semble qu'il devrait être possible de marquer certains jours en fournissant une fonction beforeShowDay (http://docs.jquery.com/UI/Datepicker#event-beforeShowDay). Mais je ne peux pas obtenir le CSS pour cela. Je voudrais rendre le fond vert pour quelques jours.

C'est le JavaScript je jusqu'ici:

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

Et c'est le css:

.markedDay { 
    background-color: green; 
} 

Mais rien ne change. Qu'est-ce que je fais mal?

Answer 1

Ce qu'il a fait

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

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

il convient d'ajouter le style à un élément et non l'élément td, comme l'a souligné Nick Craver. J'ai également dû ajouter le nom de classe généré par l'interface utilisateur jQuery à l'élément a pour rendre ma règle css plus importante que la valeur par défaut selon le CSS cascading rules. L'astuce finale consistait à utiliser background au lieu de background-color pour remplacer l'image de thème de l'interface utilisateur jQuery utilisée.

Answer 2

Ce que vous avez devrait fonctionner, you can test it here. Cependant, en fonction de votre thème, vous devrez peut-être modifier votre CSS, car le <a> à l'intérieur du <td> a son propre fond, et la classe est appliquée au <td>.