2010-05-25 33 views
5

Tengo un jquery datepicker y necesito poder cambiar el color de fondo para la fecha de la celda seleccionada. Estoy tratando con algo como:Cómo cambiar el color de la celda de un jquery datepicker

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

la esperanza de que el parámetro de fecha se refiere a la celda seleccionada, pero no parece funcionar.

¿Alguna sugerencia?

// Editar: La solución debería permitirme tener diferentes celdas con diferentes colores establecidos dinámicamente, esta es la razón por la que estoy tratando con onSelect en lugar de cambiar el CSS directamente.

El propósito es tener un calendario con eventos establecidos por el usuario.

Gracias de antemano.

+0

Si una respuesta dada funciona por favor, marca como la "respuesta" para ayudar a todos los demás. Esto ahorra preguntas duplicadas que se le preguntan. –

+0

Lo sé, pero me expresé mal, así que edité la pregunta y estoy esperando respuestas antes de marcar la correcta. ¡Gracias por la respuesta de todos modos! : D – MazarD

+0

Lamentablemente, no creo que eso sea posible. Usted tiene acceso a la devolución de llamada onSelect, sin embargo, el contenido del DatePicker se vuelve a dibujar también y no sé si se puede detener. Pero la nueva respuesta que le he dado funcionaría si puede evitar que se vuelva a dibujar el selector de fecha. –

Respuesta

9

creo que la mejor manera (suponiendo que le he entendido bien) es simplemente reemplazar el css.
En su hoja de estilo sitio o sección de la cabeza html sólo tiene que anular el siguiente selector CSS

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

EDITAR

Con tu edición en mente, el siguiente debe funcionar (suponiendo que usted puede conseguir el selector de fechas para detener refrescante)

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

Pero si lo hago anulando el CSS no me permitiría tener varias celdas con diferentes colores, ¿verdad? – MazarD

+0

Marcó su respuesta como la correcta porque es la mejor aproximación, de todos modos no pude dejar de refrescar, así que decidí escribir mi propio calendario de eventos.Gracias por el interés y la ayuda !! – MazarD

+0

No se preocupe, siempre podría echar un vistazo a la muy sólida DatePicker hecha por Kelvin Luck, aunque - http://www.kelvinluck.com/assets/jquery/datePicker/ –

0

cambio en su css la clase .ui-datepicker-current-day

+0

con la forma en que el css está jQuery css estructurado, esto se anularía ya que lo anterior solo equivale a 10 en términos de valor de orden en cascada css. El css requiere un valor de 20 o más (dos clases) para anular el valor predeterminado de jQuery ui css. –

0

El selector de fecha por defecto sigue su tema. Pero puedes anular cualquier cosa.

ui-state-active es el estilo de la fecha que seleccione. ui-state-highlight es el estilo que usa para identificar la fecha actual.

Así que hacer algo como esto:

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

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

Puede agregar este lugar css de la página o ajustar el tema en sí mismo.

0

En mi caso, necesito quitar clase activa, por lo que:

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