Jquery DatePicker Farbe Sonntag rot

Question

Gibt es eine Möglichkeit, die Farbe in einem Jquery Datepicker zB in Rot zu ändern?

Answer 1

Für Sonn- und samstags können Sie mit Tatsache berücksichtigen, dass Jquery Datepicker-Klasse fügt .ui-datepicker-week-end so können Sie .ui-datepicker-week-end{color:#f00;} hinzufügen Sie Datei CSS.

Wenn Sie nur Sonntage behandeln möchten, müssen Sie die Tatsache mitteilen, dass dies entweder die erste oder die letzte Spalte in einer Tabelle ist, die von jquery datepicker generiert wird (abhängig vom Gebietsschema).

Allgemeine Hinweise: Verwenden Sie Firefox + Firebug (oder ähnlich), um HTML-Code zu überprüfen. Es gibt viele Ideen, wie man Aufgaben im Zusammenhang mit dem Jquery-DOM-Traversing erledigen kann.

Answer 2

Unter der Registerkarte "Theming" auf der documentation page können Sie das Beispiel HTML-Ausgabe durch das Plugin sehen.

.ui-datepicker-calendar > tbody td:first-child { 
    background-color: red; 
} 

jQuery: Sie sollten bestimmte Elemente in den HTML Ziel der Lage sein, Selektoren zu verwenden

$(".ui-datepicker-calendar > tbody td:first-child").css("background-color: red"); 

Ungeprüfte und nehmen die erste Spalte ist Sonntag, so ein bisschen Zwicken erforderlich sein könnte. Wenn Sonntag auf eine andere Spalte eingestellt ist, verwenden Sie stattdessen :nth-child(n).

Answer 3

Unter der Annahme, dass die erste Spalte ist Sonntag dann die folgende jQuery den Trick tun soll:

$('table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a').css({'background':'#f00'}); 

Obwohl es jedes Mal werden müßte lief der Kalender zum Beispiel geändert wird wenn Sie ein Datum auswählen, an dem der Kalender jedes Mal neu gezeichnet wird.

Sie könnten den gleichen Selektor in css3 verwenden, obwohl es in IE nicht unterstützt wird.

table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a 
{ 
    background: #f00; 
} 

Answer 4

Wenn Sie eine lokale Kopie der Datei ui.datepicker.js haben (die benutzerdefinierte minimierte Datei würde auch funktionieren) und nichts anderes mit der Klasse .ui-datepicker-week-end tun, können Sie sie bearbeiten (machen eine zu bearbeitende Kopie wird bevorzugt, so dass nur Sonntag diese Klasse zugewiesen wird.

In der Datei ui.datepicker.js sollte die Suche nach 'week-end' zwei Ergebnisse mit dieser if-Anweisung vor ihnen enthalten: (t+h+6)%7>=5? Wenn Sie> = 5 in == 6 ändern, wird der .ui-datepicker zugewiesen Wochenendkurs nur bis Sonntag dann.

(t+h+6)%7==6?" ui-datepicker-week-end":"" 

Dann können Sie CSS Styling hinzufügen, wie Sie zu dieser Klasse für richtig:

.ui-datepicker-week-end { 
    background: #f00; 
} 

Answer 5

$('#something').datepicker({ 
    beforeShowDay:function(date){ 
     if(date.toString().indexOf('Sun ')!=-1) 
      return [1,'red'];else 
      return [1]; 
    } 
} 

css:

.ui-datepicker td.red a{ 
color:#f00 !important; 
}  

Nicht sehr schön, arbeitet aber je nach Bedarf.

Answer 6

Wenn Sie beide Samstag und Sonntag diese CSS verwenden Farbe:

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: #C00;} 

Answer 7

Sie Farbe Sonntag mit CSS ändern

.datepicker table tr td:first-child { 
color: red 
} 

Samstag Farbe kann wie folgt

.datepicker table tr td:first-child + td + td + td + td + td + td { 
color: red 
} 

ändern

Wenn dies nicht funktioniert, gehen Sie zu inspent Element und finden Sie den richtigen CSS Pfad für Datepicker date a nd set über css ot es