Modificar jquery datepicker CSS con beforeShowDay

Question

Estoy usando beforeShowDay y he asignado la clase specialDay a días determinados en mi calendario; esto funciona bien, sin embargo, tengo problemas para entender cómo se diseña la clase y cómo funciona el CSS del rodillo de temas en general. He tratado:

td .specialDate { 
    background: #33CC66; 
} 

pero esto no afecta a la apariencia del calendario. ¿Algunas ideas?

Answer 1

Siempre que estoy usando la interfaz de usuario de JQuery uso Firebug para ver los estilos que se aplican a elementos particulares, esto te permitirá identificar fácilmente con qué elementos de CSS necesitas jugar.

Answer 2

Tuve el mismo problema, afortunadamente encontré la respuesta. Cuando desactiva un día (establecido en "falso") es válido para asignar una clase (".specialDate") para cambiar el color de fondo, pero no si la fecha está habilitada, porque tenemos otro anclaje ("a") que anula la clase asignada al anclaje "td".

Por lo tanto, si la fecha está habilitado para seleccionar y desea cambiar los estilos, usted tiene que editar el "un" ancla heredada, como esto:

.specialDate a { background: #33CC66 !important; } 

Es muy importante que se agrega el "! important "(si perdonará la repetición) indicación para anular otras configuraciones.

Espero que esto ayude!

Answer 3

.specialDate span {background-color:#ff0000!important;} 

si quieres desactivar efecto de transparencia

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important} 

Answer 4

Crear su estilo CSS como esto:

<style type="text/css"> 
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important; 
    background-color: #fffac2 !important; 
    color: #006633; 
    } 
</style> 

A continuación, añada su estilo al calendario usando la opción beforeShowDay.

$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays); 


// ------------------------------------------------------------------ 
// highlightDays 
// ------------------------------------------------------------------ 
function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (SOME CONDITION TO DETERMIN SPECIAL DAY) { 
      return [true, 'specialDay']; 
     } 
    } 
    return [true, '']; 
} 

Answer 5

Aquí hay un poco que resaltará la fecha actual o la fecha del cuadro de texto asociado.

El estilo:

.dateHighlight a { background: #58585a !important; } 

El guión:

var pickerDate; 
$("#pickerId").datepicker({ 
    // get the date to be highlighted; use today if no date 
    beforeShow: function() { 
     pickerDate = $("#pickerId").datepicker("getDate"); 
     if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0)); 
    }, 
    // add css class to the date 
    beforeShowDay: function(date) { 
     if (date.getTime() == pickerDate.getTime()) { 
      return [true, 'dateHighlight', ''] 
     } 
     return [true] 
    } 
}); 

Answer 6

Si el calendario ui tiene un tema, debe desactivar la background-image para el atributo specialDate:

.specialDate a { 
    background-image: none !important; 
    background: #33CC66 !important; 
} 

Answer 7

Uso al hacer clic puede hacer todo el css que necesita:

var checkin = $('.dpd1').datepicker() 
.on('click', function (ev) { 
     $('.datepicker').css("z-index", "999999999"); 
}).data('datepicker');