Jquery DatePicker color Sunday red

Question

¿Hay alguna manera de cambiar el color a, digamos rojo, los domingos en un Jquery Datepicker?

Answer 1

Para sábados y domingos se puede considerar el uso hecho de que jQuery selector de fechas agrega la clase .ui-datepicker-week-end para que pueda agregar .ui-datepicker-week-end{color:#f00;} a que CSS archivo.

Si solo desea manejar los domingos, debe informar que esta será la primera o la última columna de una tabla generada por jquery datepicker (depende de la configuración regional).

Consejos generales: use firefox + firebug (o similar) para inspeccionar el código html. da muchas ideas sobre cómo llevar a cabo tareas relacionadas con jquery DOM crossing.

Answer 2

En la pestaña Temming en documentation page, puede ver el ejemplo de salida de HTML por el complemento. Usted debe ser capaz de usar selectores para apuntar elementos específicos en el código HTML:

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

jQuery:

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

no ensayadas y asume la primera columna es el domingo, por lo que podría ser necesario un poco de ajuste. Si Sunday está configurado en una columna diferente, use :nth-child(n) en su lugar.

Answer 3

Suponiendo que la primera columna es Domingo entonces la siguiente jQuery debe hacer el truco:

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

A pesar de que tendría que ser ejecutado cada vez que se cambia el calendario, por ejemplo, cuando selecciona una fecha, ya que el calendario se vuelve a dibujar cada vez.

Puede usar el mismo selector en css3 aunque no es compatible con IE.

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

Answer 4

Si tiene una copia local del archivo ui.datepicker.js (el archivo personalizado modificado también funcionaría) y no está haciendo nada más con la clase .ui-datepicker-week-end, puede editarlo (haciendo se prefiere una copia para editar,) para que solo el domingo se le asigne esa clase.

En el archivo ui.datepicker.js, la búsqueda de "fin de semana" debe mostrar dos resultados con esta instrucción en línea if anterior: (t+h+6)%7>=5? Al cambiar el valor> = 5 a == 6 se asignará el .ui-datepicker -semana fin de clase solo a los domingos.

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

continuación, puede agregar estilo CSS como mejor le parezca a esa clase:

.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; 
}  

No es muy bonito, pero funciona según sea necesario.

Answer 6

Si usted necesita colorear tanto el sábado y el domingo utilizan este CSS:

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

Answer 7

puede cambiar Domingo de color usando css

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

de color Sábado puede cambiar como esto

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

si no está trabajando este código, vaya al elemento de inspección y busque la ruta correcta de css para la fecha del datepicker a nd establecido encima de css ot