Jquery UI DatePicker, colorear fechas en el calendario

[Carxl]

Hola...

Pues como dice el título, cómo puedo cambiar el color de ciertas fechas en el datepicker de jquery UI???

Es decir si hay eventos el 20 de enero de 2010, que esa fecha aparezca en otro color en datePicker.

No logro encontrar algo que me permita hacerlo.

Saludos y gracias.

[masterpuppet]

Podrías utilizar el evento onBeforeShowDay, algo asi:

Código Javascript:

var events = [objDate1, objDate2, objDate3];
$('#datepicker').datepicker({
   ...              
   beforeShowDay: function(date) {                      
      return jQuery.inArray(date, events) 
          ? [true, 'css-class-to-highlight', 'tool-tip-text'] 
          : [true, ''];
   }
});
 

Los eventos en este ejemplo deberían ser objetos date.

Nota: podrías extender datepicker y agregarle la funcionalidad.

Saludos.

[masterpuppet]

Me auto-corrijo, con objetos la comparación no va a funcionar y inArray devuelve -1 cuando no encuentra coincidencias, te lo dejo con strings

Código Javascript:

var events = ['15-1-2011', '16-1-2011', '17-1-2011', '18-1-2011'];
                
$('#datepicker').datepicker({
   ...
   beforeShowDay: function(date) {                              
      var current  = date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();                                               
      return jQuery.inArray(current, events) == -1 
             ? [true, ''] 
             : [true, 'css-class-to-highlight', 'tool-tip-text'];                                               
   }
});
 

desconozco si hay algún date.format('d-m-Y') en jQuery para hacerlo mas prolijo.

Saludos y disculpas por el error.

[Dany_s]

el datepicker traer una utilidad

$.datepicker.formatDate('dd-mm-yy', new Date())

lo busqué porque me dió curiosidad jeje

[Carxl]

Hola , perdón por la demora.

Masterpuppet, gracias por la ayuda.

Esto es lo que hice:

Código Javascript:

<script>
    $(function() {
        var events = ['15-1-2011', '16-1-2011', '17-1-2011', '18-1-2011'];
    
        $( "#datepicker" ).datepicker({
            showWeek: true,
            firstDay: 1,
            beforeShowDay: function(date) {
                var current  = date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
                return jQuery.inArray(current, events) == -1
                ? [true, '']
                : [true, 'css-class-to-highlight', 'tool-tip-text'];
            }
        });
        
        /*$(".ui-datepicker-calendar td:contains('13')").addClass('ui-state-hover');
        $(".ui-datepicker-calendar td:contains('25')").addClass('ui-state-hover');
        $(".ui-datepicker-calendar td:contains('02')").addClass('ui-state-hover');*/
    });
    </script>
 

Código HTML:

<div id="datepicker"></div>
 

La verdad no sé por qué no cambia los colores de esas fechas. Sintácticamente está bien.

Dany_S, si no estoy mal, eso me pemite darle formato a la fecha si la voy a mostrar en un input (por decir algo), pero no me permite pasarle fechas para que las "coloree". Gracias

También intenté esto:

Código Javascript:

$(".ui-datepicker-calendar td:contains('3')").addClass('ui-state-hover')
 

Pero le problema con eso, es que me colorea todas las fechas que contengan 3

Saludos

[masterpuppet]

Que tal Carxl, deberia funcionar, lo tengo asi en el sandbox y va bien, te dejo un update con la sugerencia de Dany_s,

Código Javascript:

var events = ['15-1-2011', '16-1-2011', '17-1-2011', '18-1-2011'];
 
$('#datepicker').datepicker({
    showWeek: true,
    firstDay: 1,
    beforeShowDay: function(date) {                                                         
        var current = $.datepicker.formatDate('dd-m-yy', date);                     
        return jQuery.inArray(current, events) == -1 ? [true, ''] : [true, 'css-class-to-highlight', 'tool-tip-text'];                                              
    }
});
 

podrias checkear la el valor de current, a ver si esta en el formato correcto, algo asi:

Código Javascript:

...
var current = $.datepicker.formatDate('dd-m-yy', date); 
console.log(current);
...
 

[Carxl]

Déjame probar... ya te cuento :)

----

Tengo que colocar algún código fuera del que me pasaste? Debo hacer algo con ese return? Porque realmente yo probé y sigue sin andar :S No sé que podría ser.

La variable current tiene:

Código Javascript:

27-12-2010
28-12-2010
29-12-2010
30-12-2010
31-12-2010
01-1-2011
02-1-2011
03-1-2011
04-1-2011
05-1-2011
06-1-2011
07-1-2011
08-1-2011
09-1-2011
10-1-2011
11-1-2011
12-1-2011
13-1-2011
14-1-2011
15-1-2011
16-1-2011
17-1-2011
18-1-2011
19-1-2011
.
.
.
 

[Carxl]

Me dió por cambiar esto:

Código Javascript:

return jQuery.inArray(current, events) == -1 ? alert('-1') : alert('No -1');
 

Y el log muestra lo siguiente:

Código log:

27-12-2010
28-12-2010
29-12-2010
30-12-2010
31-12-2010
01-1-2011
 

Es como si no recorriera todo el array en cada comparación... creo Mi fuerte no es Jquery.

[masterpuppet]

Vamos a descartar primero lo obvio, si exploras los elementos con firebug la clase no aparece asignada a los elementos ?.
Descartando esto, vamos a hacer otro debug:

Código Javascript:

...
beforeShowDay: function(date) {                                                         
   var current = $.datepicker.formatDate('dd-m-yy', date);                     
   console.log(current);
   console.log(jQuery.inArray(current, events));
   return jQuery.inArray(current, events) == -1 ? [true, ''] : [true, 'css-class-to-highlight', 'tool-tip-text'];                                              
}
...
 

El segundo log te va a devolver -1 si no lo encuentra o la posición en la que esta.

[Carxl]

Hola masterpuppet, cómo vas?

No te preocupes que la lógica está perfecta, lo que pasaba era una cuestión de css, los atributos css que tú colocaste no servian para mis CSS. Cambié las clases y funciona perfecto

Este es mi código:

Código Javascript:

<script>
    $(function() {
        var events = ['15-1-2011', '02-1-2011', '17-1-2011', '17-2-2011'];
    
        $( "#datepicker" ).datepicker({
            beforeShowDay: function(date) {
                var current = $.datepicker.formatDate('dd-m-yy', date);
                return jQuery.inArray(current, events) == -1 ? [true, ''] : [true, 'ui-state-hover', 'ui-state-highlight'];
            }
        });
    });
    </script>
 

Eso fue, cambié los atributos css y voilá!

Muchas gracias!

[Carxl]

Hola de nuevo masterpuppet :)

Ahora que miré de nuevo el código, me surgió una duda:

Código Javascript:

return jQuery.inArray(current, events) == -1 ? [true, ''] : [true, 'ui-state-hover', 'ui-state-highlight'];
 

Sé que la instrucción:

sentencia ? '' : '';

Es una manera abreviada para if/else (se usa también en php).

Pero lo que contiene es lo que me causa duda:

? [true, ''] : [true, 'ui-state-hover', 'ui-state-highlight']

Estás declarando arrays? que estás haciendo en los 'true'. Entiendo que un reemplazo, pero no hayo la lógica de jquery. Podrías explicarme por favor un poco esas instrucciones?

Gracias!

[oscalber]

hola a todos, no quise crear un nuevo tema por q tiene algo de similitud a este, yo lo que quiero es bloquear los dias sabados y domingos, ojala me puedan colaborar...

saludos..

[masterpuppet]

Que tal Carxl, uno tiende a poner la solución sin explicar mucho, te pido las disculpas del caso, te comento:

esto: condition ? true : false se llama operador ternario

y con respecto a lo que retorna beforeShowDay, es un array, donde el primer parametro es si el dia es selectable(true|false), el segundo, es la clase para agregar al contenedor del dia y el tercero es el tooltip(para el hover).

Tendiendo esto en cuenta, cambiando un poco el script podrías agregar información de cada evento, y cuando el usuario haga hover sobre el día mostrar info de dichos eventos.

Saludos.

[masterpuppet]

Iniciado por oscalber

hola a todos, no quise crear un nuevo tema por q tiene algo de similitud a este, yo lo que quiero es bloquear los dias sabados y domingos, ojala me puedan colaborar...

saludos..

Para tu caso tiene noWeekends.

Saludos.

[Carxl]

Iniciado por masterpuppet

Que tal Carxl, uno tiende a poner la solución sin explicar mucho, te pido las disculpas del caso

Una cerveza y ya... xD

Iniciado por masterpuppet

esto: condition ? true : false se llama operador ternario

Sí, lo conozco totalmente, como te comenté en mi post anterior, también se maneja en php.

Iniciado por masterpuppet

y con respecto a lo que retorna beforeShowDay, es un array, donde el primer parametro es si el dia es selectable(true|false), el segundo, es la clase para agregar al contenedor del dia y el tercero es el tooltip(para el hover).

Pera que me perdí xD.

Esta fracción, qué hace particularmente?:

Código Javascript:

[true, '']
 

Si es seleccionable... qué hacen las '' (comillas simples) ??

Y la misma pregunta para:

Código Javascript:

[true, 'ui-state-hover', 'ui-state-highlight']
 

Con esa instrucción si me pierdo jeje

Gracias!!

[masterpuppet]

Voy de nuevo, estamos de acuerdo con que devuelve un array de parametros que se van a utilizar a la hora de "pintar" el dia, bueno el primer parametro es si se puede seleccionar o no el dia, el segundo es la o las clases css para el wrapper del día(el td), lo mando vacio porque es un parametro obligatorio, lo que hace es pintar el td del dia con class='', lo podes checkar mirando el html del calendario, y el tercer parámetro es el tooltip, que al ser opcional cuando no hay eventos no lo devuelvo, si dejaste 'ui-state-highlight' como en el ejemplo, hace un hover sobre el dia que hay evento y vas a ver el title con el texto 'ui-state-highlight'.

Espero haber sido mas claro esta vez.

PD: ahora te contesto el otro post

[oscalber]

muchas gracias lo solucione con css...


saludoss...