2011-07-28 72 views
17

Cómo puedo usar beforeShowDay para resaltar días en jQuery UI datepicker. Tengo la siguiente matriz fechaResaltar fechas en jquery UI datepicker

Array 
(
    [0] => 2011-07-07 
    [1] => 2011-07-08 
    [2] => 2011-07-09 
    [3] => 2011-07-10 
    [4] => 2011-07-11 
    [5] => 2011-07-12 
    [6] => 2011-07-13 
) 
+0

¿Qué desea lograr exactamente? –

+2

Quiero resaltar las fechas anteriores. –

Respuesta

19

He resuelto el problema siguiendo

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]; 

     } 
    }); 
}); 
+1

+1, otra opción necesaria: Agregar un enlace a la fecha activada para ir a la descripción del evento, por ejemplo –

+0

Puede evitar esas variables y, m y d si compara fechas obteniendo sus valores antes y usando el contador i: if (fecha .valueOf() == disabledDays [i] .valueOf()) {... – Rober

+1

@Nisanth: Su respuesta es hacer un ciclo innecesario. No necesita hacer 'for (i = 0; i

0

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

se compara el parámetro de fecha en el beforeShowDay con las fechas que ha conseguido en su conjunto, y si hay un partido que devolver una matriz tal como se define en el enlace arriba.

En la matriz que devuelve beforeShowDay, el segundo elemento se utiliza para establecer el nombre de clase que se utilizará en la fecha, luego puede usar css para establecer los estilos para esa clase.

33

Eche un vistazo a la documentación.

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

Esto significa que es necesario crear una función que tendrá una fecha y devolver una matriz de parámetros donde los valores son:

  1. booleano - indica si la fecha se puede seleccionar
  2. cadena - nombre de la clase CSS que se APLICADA a la fecha
  3. cadena - una información sobre herramientas emergente opcional para esta fecha

aquí es un exa MPLE:

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 puede agregar el estilo para resaltar la fecha

<style> 
    .css-class-to-highlight{ 
     background-color: #ff0; 
    } 
</style> 
+0

¿podría hacer un violín con demostración, por favor? –

+0

No creo que puedas comparar fechas como esa en JS. 'new Date (1) == new Date (1) is false' – mxmissile

+0

Intenté su código para resaltar las fechas. Pero no está funcionando con la matriz dinámica. Sin embargo, está funcionando de la manera que describió. ¿Algunas ideas? Está resaltando todas las fechas en el calendario. – Superman

2

encontrado la respuesta más votada no funciona. Actualicé el código poco para que funcione. $ .inArray() busca principalmente indexOf(). Además, no podemos comparar dos fechas directamente para la igualdad. Referencia: Compare two dates with JavaScript

function inArrayDates(needle, haystack){ 
    var found = 0; 
    for (var i=0, len=haystack.length;i<len;i++) { 
     if (haystack[i].getTime() == needle.getTime()) return i; 
      found++; 
     } 
    return -1; 
} 

y actualizar la función aceptado como

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

fechas en JS son instancias de objeto Date, por lo que no puede ver correctamente si las fechas son iguales o usando =====.

solución simple:

var your_dates = [ 
    new Date(2017, 4, 25), 
    new Date(2017, 4, 23) 
]; 

$("#some_selector").datepicker({ 
    beforeShowDay: function(date) { 
     are_dates_equal = d => d.getTime() === date.getTime(); 
     if(your_dates.some(are_dates_equal)) { 
      return [true, 'ui-state-active', '']; 
     } 
     return [true, '', '']; 
    } 
}) 
Cuestiones relacionadas