2011-05-18 21 views
8

Digamos que quiero que el 2/5/2011 (o cualquier otro día) tenga un color diferente al del resto de los días. es posible?¿Hay alguna manera de dar estilo a los días de datechicker de jquery?

Este es un artículo de ejemplo para un día en particular

<td class=" " onclick="DP_jQuery_1305738227207.datepicker._selectDay('#datepicker',4,2011, this);return false;"><a class="ui-state-default ui-state-hover" href="#">11</a></td> 

No sé si hay alguna forma de anular cómo el planificador de evento crea IDS/clases para cada día.

+0

Probablemente. Ayudaría si proporciona el marcado. –

+0

¿Es solo ese día, siempre y solo ese día o hay días múltiples/diferentes? –

+0

Días múltiples/diferentes – joslinm

Respuesta

7

Ejemplo de trabajo:http://jsfiddle.net/hunter/UBPg5/


Usted puede hacer esto mediante la adición de un beforeShowDay devolución de llamada

vincular a su devolución de llamada:

$("input:text.date").datepicker({ 
    beforeShowDay: SetDayStyle 
}); 

Crear su función con cierta matriz estática de la mala fechas o construir esta matriz en otro lugar:

var badDates = new Array("5/2/2011"); 
function SetDayStyle(date) { 
    var enabled = true; 
    var cssClass = ""; 

    var day = date.getDate(); 
    var month = date.getMonth() + 1; //0 - 11 
    var year = date.getFullYear(); 
    var compare = month + "/" + day + "/" + year; 

    var toolTip = badDates.indexOf(compare) + " " + compare 

    if (badDates.indexOf(compare) >= 0) cssClass = "bad"; 

    return new Array(enabled, cssClass, toolTip); 
} 

Cree sus estilos

.bad { background: red; } 
.bad a.ui-state-active { background: red; color: white; } 

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

la función toma una fecha como parámetro y debe devolver una matriz con [0] igual a lo que indica verdadero/falso si o no, esta fecha es seleccionable, [1] igual a un nombre (s) de clase CSS o '' para la presentación predeterminada, y [2] una información emergente opcional para esta fecha. Se requiere para cada día en el selector de fecha antes de que se muestre.

+3

Creé un ejemplo jsfiddle: http://jsfiddle.net/brian3f/XuuNC/ –

+0

Esto es genial, muchas gracias. – joslinm

+0

no hay problema, no sabía que estaba ahí hasta hoy, pero puedo ver algunas aplicaciones geniales – hunter

Cuestiones relacionadas