Modifica jquery datepicker CSS con beforeShowDay

Question

Sto usando beforeShowDay e ho assegnato la classe specialDay a determinati giorni nel mio calendario; questo funziona bene, tuttavia ho difficoltà a capire come stile la classe e come funziona il css da theme roller in generale. Ho provato:

td .specialDate { 
    background: #33CC66; 
} 

ma questo non ha alcun effetto sull'aspetto del calendario. Qualche idea?

Answer 1

Ogni volta che utilizzo l'interfaccia utente JQuery, utilizzo Firebug per verificare gli stili applicati a determinati elementi, ciò consentirà di identificare facilmente gli elementi CSS con cui si desidera giocare.

Answer 2

Ho avuto lo stesso problema, fortunatamente ho trovato la risposta. Quando disattivi un giorno (impostato su "falso") è valido per assegnare una classe (".specialDate") per cambiare il colore di sfondo, ma non se la data è abilitata, perché abbiamo un altro ancoraggio con stile ("a") che sovrascrive la classe assegnata all'ancora "td".

Quindi, se la data è in grado di selezionare e voler cambiare gli stili, è necessario modificare la "a" ancora ereditato, in questo modo:

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

E 'molto importante che si aggiunge il "! importante "(se si perdona la ripetizione) per poter sovrascrivere le altre impostazioni.

Spero che questo possa aiutare!

Answer 3

.specialDate span {background-color:#ff0000!important;} 

se si desidera disattivare la trasparenza effetto

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important} 

Answer 4

Crea il tuo stile css come questo:

<style type="text/css"> 
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important; 
    background-color: #fffac2 !important; 
    color: #006633; 
    } 
</style> 

Quindi aggiungere il tuo stile al calendario utilizzando l'opzione 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, '']; 
} 

Answer 5

Ecco un po 'che evidenzierà la data corrente o la data dalla casella di testo associata.

Lo stile:

.dateHighlight a { background: #58585a !important; } 

Lo script:

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] 
    } 
}); 

Answer 6

Se il calendario ui ha un tema, è necessario disattivare il background-image per l'attributo specialDate:

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

Answer 7

Utilizzando al clic puoi fare tutti i css che ti servono:

var checkin = $('.dpd1').datepicker() 
.on('click', function (ev) { 
     $('.datepicker').css("z-index", "999999999"); 
}).data('datepicker');