2010-05-25 10 views
5

Ich habe einen jquery Datepicker und ich muss in der Lage sein, die Hintergrundfarbe für das ausgewählte Zellendatum zu ändern. Ich versuche, mit so etwas wie:Wie man die Zellfarbe eines jquery Datepicker ändert

$("#fecha").datepicker({ 
      onSelect: function(value, date) { 
      alert(date.css()); 
      } 
    }); 

der Hoffnung, dass das Datum Parameter an die ausgewählte Zelle bezeichnet, aber es scheint nicht zu funktionieren.

Irgendwelche Vorschläge?

// Edit: Die Lösung sollte mir verschiedene Zellen mit verschiedenen Farben dynamisch gesetzt haben, deshalb versuche ich mit onSelect, anstatt das CSS direkt zu ändern.

Der Zweck ist, einen Kalender mit Ereignissen zu haben, die vom Benutzer festgelegt werden.

Vielen Dank im Voraus.

+0

Wenn eine bestimmte Antwort alle anderen zu helfen, funktioniert es bitte als „Antwort“ markieren. Dies spart doppelte Fragen. –

+0

Ich weiß, aber ich habe mich schlecht ausgedrückt, also habe ich die Frage bearbeitet und ich warte auf Antworten, bevor ich die richtige markiere. Danke für die Antwort trotzdem! : D – MazarD

+0

Leider glaube ich nicht, dass das möglich ist. Sie haben Zugriff auf den onSelect Callback, aber der Inhalt des DatePickers wird ebenfalls neu gezeichnet und ich weiß nicht, ob dieser gestoppt werden kann. Aber die neue Antwort, die ich gegeben habe, WÜRDE funktionieren, wenn Sie die Datumsauswahl stoppen können, die neu gezeichnet wird. –

Antwort

9

Ich denke, der beste Weg (vorausgesetzt ich Sie richtig verstanden habe), ist einfach die CSS außer Kraft setzen.
In Ihrer Website Sheet oder HTML-Kopfbereich Sie müssen nur den folgenden CSS-Selektor

.ui-datepicker-current-day .ui-state-active { background: #000000; } 

EDIT

Mit Ihrem bearbeiten im Auge außer Kraft zu setzen, die picker folgend arbeiten (vorausgesetzt, Sie bekommen um zu stoppen)

onSelect: function(value, date) { 
    date.dpDiv.find('.ui-datepicker-current-day a') 
     .css('background-color', '#000000'); 
} 
+0

Aber wenn ich es überschreibe, würde es mir nicht erlauben, mehrere Zellen mit verschiedenen Farben zu haben, oder? – MazarD

+0

Markierte Ihre Antwort als die richtige, weil es die beste Annäherung ist, jedenfalls habe ich nicht das Ding, um aufzuhören, sich zu erneuern, also entschied ich mich, meinen eigenen Ereigniskalender zu schreiben.Danke für das Interesse und die Hilfe !! – MazarD

+0

Keine Sorge, du könntest immer einen Blick auf den sehr robusten datePicker von Kelvin Luck werfen - http://www.kelvinluck.com/assets/jquery/datePicker/ –

0

Veränderung in Ihrem CSS die Klasse .ui-datepicker-current-day

+0

mit der Art, wie die CSS ist jQuery CSS strukturiert, würde dies überschrieben werden, da das oben genannte nur 10 in Bezug auf CSS-Kaskadenordnung Wert entspricht. Die CSS erfordert einen Wert von 20 oder mehr (zwei Klassen), um die Standardwerte von jQuery ui css zu überschreiben. –

0

Der Datepicker folgt standardmäßig Ihrem Thema. Aber Sie können alles außer Kraft setzen.

ui-state-active ist der Stil des Datums, das Sie auswählen. ui-state-highlight ist der Stil, mit dem das aktuelle Datum identifiziert wird.

So etwas tun, wie folgt aus:

#ui-datepicker-div .ui-state-active {color: #FFFFCC;} 

#ui-datepicker-div .ui-state-highlight {color: #DCDCDC;} 

Sie eher diese CSS der Seite hinzufügen können oder das Thema selbst einstellen.

0

In meinem Fall, ich brauche aktive Klasse zu entfernen, so:

$("#datepicker").datepicker({ 
    onSelect: function(dateText, inst) { 
    setTimeout(function(){ 
     inst.dpDiv.find('.ui-datepicker-current-day a').removeClass('ui-state-active'); 
    }, 50); 
    } 
}); 
Verwandte Themen