Resaltar fechas en jquery UI datepicker

Al fin luego de tanto batallar ya encontramos el arreglo de esta incógnita que muchos los usuarios de esta web han presentado. Si tienes algo más que compartir no dejes de compartir tu información.

Solución:

Eche un vistazo a la documentación.

beforeShowDay La función toma una fecha como parámetro y debe devolver un array con [0] igual a true/false indicando si esta fecha es seleccionable o no, [1] igual a un nombre(s) de clase CSS o ” para la presentación predeterminada, y [2] una información sobre herramientas emergente opcional para esta fecha. Se llama para cada día en el selector de fecha antes de que se muestre.

Esto significa que necesita crear una función que tome una fecha y devuelva un array de parámetros donde los valores son:

1. booleano: indica si se puede seleccionar la fecha
2. string – nombre de la clase css que se aplicará a la fecha
3. string – una información sobre herramientas emergente opcional para esta fecha

Aquí hay un ejemplo:

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker(
   beforeShowDay: function(date) 
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) 
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
       else 
         // default
         return [true, '', ''];
      
   
);

y ahora puedes agregar el estilo para resaltar la fecha

Resolví el problema usando

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function()  
    $( "#dateselector").datepicker( 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) 
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < disabledDays.length; i++) 
                if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) 
                    //return [false];
                    return [true, 'ui-state-active', ''];
                
            
            return [true];

        
    );
);

Encontré que la respuesta más votada no funciona. Se actualizó un poco el código para que funcione. $.inArray() busca principalmente indexOf(). Además, no podemos comparar dos fechas directamente para la igualdad. Referencia: Compara dos fechas con JavaScript

function inArrayDates(needle, haystack)
    var found = 0;
    for (var i=0, len=haystack.length;i

if(inArrayDates(date, markDates) != -1) 
            return [true, 'selected-highlight', 'tooltip here'];
           else 
             return [true, '', ''];