Modifizieren Sie jquery datepicker CSS mit beforeShowDay

Question

Ich verwende beforeShowDay und habe die Klasse specialDay bestimmten Tagen in meinem Kalender zugeordnet; das funktioniert gut, aber ich habe Probleme zu verstehen, wie man die Klasse style und wie die Css von Theme Roller im Allgemeinen funktioniert. Ich habe versucht:

td .specialDate { 
    background: #33CC66; 
} 

, aber dies hat keinen Einfluss auf das Aussehen des Kalenders. Irgendwelche Ideen?

Answer 1

Wenn ich die JQuery-UI-Funktionen verwende, verwende ich Firebug, um alle Stile zu überprüfen, die auf bestimmte Elemente angewendet werden. So können Sie leicht identifizieren, mit welchen CSS-Elementen Sie spielen müssen.

Answer 2

Ich hatte das gleiche Problem, glücklicherweise fand ich die Antwort. Wenn Sie einen Tag deaktivieren (auf "false" setzen), können Sie eine Klasse (".specialDate") zuweisen, um die Hintergrundfarbe zu ändern, aber nicht, wenn das Datum aktiviert ist, da wir einen anderen formatierten Anker ("a") haben das überschreibt die Klasse, die dem Anker "td" zugewiesen ist.

Also, wenn Ihr Datum auswählen aktiviert ist und wollen die Stile ändern, müssen Sie die geerbte „einen“ Anker bearbeiten, wie folgt aus:

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

Es ist sehr wichtig, dass Sie die "hinzufügen ! wichtig "(wenn Sie die Wiederholung vergeben) Anzeige, um andere Einstellungen zu überschreiben.

Hoffe, das kann helfen!

Answer 3

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

wenn Sie wollen Transparenz-Effekt deaktivieren

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

Answer 4

Erstellen Sie Ihre CSS-Stil wie folgt aus:

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

Dann Stil hinzufügen beforeShowDay Option zum Kalender verwenden.

$('#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

Hier ist ein Bit, das entweder das aktuelle Datum oder das Datum aus dem zugehörigen Textfeld hervorhebt.

Der Stil:

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

Das Skript:

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

Wenn der ui Kalender ein Thema hat, müssen Sie die background-image für das specialDate Attribut deaktivieren:

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

Answer 7

Verwendung Mit einem Klick können Sie alle benötigten CSS-Dateien erstellen:

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