Resalte las fechas en un rango específico con el marcador de fechas de jQuery

Question

Necesito resaltar las fechas entre una fecha de inicio y una fecha de finalización, que yo debería ser capaz de especificar. ¿Alguien puede ayudarme?

Answer 1

Puede usar el beforeShowDay event. Se llamará para cada fecha que deba mostrarse en el calendario. Pasa en una fecha y devuelve un array con [0] = isSelectable, 1 = CssClass, [2] = Algunos texto de sugerencia

$('#whatever').datepicker({ 
      beforeShowDay: function(date) { 
      if (date == myDate) { 
       return [true, 'css-class-to-highlight', 'tooltipText']; 

       } 
      } 
}); 

Answer 2

Si está utilizando de datepick Keith madera se puede utilizar el siguiente ejemplo tomado de here

$(selector).datepick({onDate: highlightDays}); 

function highlightDays(date) { 
    return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; 
} 

Answer 3

¡He aquí un ejemplo de trabajo! Necesitarás hacer un paquete desde aquí con http://jqueryui.com/download con núcleo, widget y datepicker.

La parte Javascript a proponer a:

<script> 
$(document).ready(function() { 

    var dates = ['22/01/2012', '23/01/2012']; // 
      //tips are optional but good to have 
    var tips = ['some description','some other description'];  

    $('#datepicker').datepicker({     
     dateFormat: 'dd/mm/yy', 
     beforeShowDay: highlightDays, 
     showOtherMonths: true, 
     numberOfMonths: 3, 
    }); 

    function highlightDays(date) { 
     for (var i = 0; i < dates.length; i++) { 
      if (new Date(dates[i]).toString() == date.toString()) {    
       return [true, 'highlight', tips[i]]; 
      } 
     } 
     return [true, '']; 
    } 

}); 
</script> 

El HTML parte:

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

Añadir alguna parte de este CSS:

td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;} 
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;} 

y se necesita para hacer una imagen pequeña llamado bg.png para que funcione

Answer 4

pensaba que iba a tirar mis dos centavos, ya que parece de peso más rápido y más ligero que otros:

jQuery(function($) { 
    var dates = { 
    '2012/6/4': 'some description', 
    '2012/6/6': 'some other description' 
    }; 

    $('#datepicker').datepicker({ 
    beforeShowDay: function(date) { 
     var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); 

     if (search in dates) { 
     return [true, 'highlight', (dates[search] || '')]; 
     } 

     return [false, '', '']; 
    } 
    }); 
}); 

Answer 5

Mugur, su código hizo el trabajo no es para mí en Firefox o Safari, requirió la date var a estar formateado (que obtuve de here). Aquí

function highlightDays(date) { 
for (var i = 0; i < dates.length; i++) { 

var d = date.getDate(); 
var m = date.getMonth(); 
m += 1; // JavaScript months are 0-11 
var y = date.getFullYear(); 

var dateToCheck = (d + "/" + m + "/" + y); 
    if (dates[i] == dateToCheck) { 
     return [true, 'highlight', tips[i]]; 
    } 
    } 
return [true, '']; 
} 

Y, por supuesto, que la anterior se encuentra que no da cuenta de los principales-ceros relleno para la matriz dates necesitaba ser cambiado a:

var dates = ['22/1/2014', '23/1/2014']; 

Answer 6

No estoy seguro si esta voluntad ser todavía útil, pero como éste era útil para mí, quiero compartir lo que hice:

En mi JavaScript:

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"]; 

$("#SomeID").datepicker({ beforeShowDay: highLight }); 

function highLight(date) { 
     for (var i = 0; i < holidays.length; i++) { 
      if (new Date(holidays[i]).toString() == date.toString()) { 
       return [true, 'ui-state-holiday']; 
      } 
     } 
     return [true]; 
    } 

Y en el tema jquery-ui.css He añadido

.ui-state-holiday .ui-state-default { 
    color: red; 
} 

Si se desea resaltar también los fines de semana, usted tiene que utilizar este CSS en lugar

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default { 
    color: red; 
} 

y este es el resultado:

(Tenga en cuenta que He configurado mi idioma para español, pero esto no es importante para este código)

Answer 7

Tarde a la fiesta, pero aquí hay un jsFiddle que he utilizado para la prueba:

https://jsfiddle.net/gq6kdoc9/

HTML:

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

JavaScript:

var dates = ['11/13/2017', '11/14/2017']; 
    //tips are optional but good to have 
    var tips = ['some description', 'some other description']; 

    $('#datepicker').datepicker({ 
    dateFormat: 'dd/mm/yy', 
    beforeShowDay: highlightDays, 
    showOtherMonths: true, 
    numberOfMonths: 3, 
    }); 

    function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (new Date(dates[i]).toString() == date.toString()) { 
     return [true, 'highlight', tips[i]]; 
     } 
    } 
    return [true, '']; 
    } 

y CSS:

td.highlight { 
    border: none !important; 
    padding: 1px 0 1px 1px !important; 
    background: none !important; 
    overflow: hidden; 
} 

td.highlight a { 
    background: #ad3f29 url(bg.png) 50% 50% repeat-x !important; 
    border: 1px #88a276 solid !important; 
} 

Construido sobre el Mi ¡Ejemplo de trabajo de ke arriba!