Resalte las fechas en un rango específico con jQuery’s datepicker

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

Puede usar el evento beforeShowDay . Se llamará para cada fecha que deba mostrarse en el calendario. Pasa una fecha y devuelve una matriz con [0] = isSelectable, 1 = cssClass, [2] = Algún texto de información sobre herramientas

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

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

La parte de JavaScript para poner antes:

  

La parte HTML:

 

Agrega un lugar a 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 deberá crear una imagen pequeña llamada bg.png para que funcione

Pensé que lanzaría mis dos centavos ya que parece más rápido y más liviano 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, '', '']; } }); }); 

No estoy seguro si esto aún será útil, pero como esto fue ú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 jquery-ui-theme.css he agregado

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

Si desea resaltar los fines de semana también, debe usar este CSS en su lugar

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

Y este es el resultado:
Calendario de jqueryUI con fines de semana y días festivos

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

Si está usando la fechata de Keith Wood, puede usar el siguiente ejemplo tomado de aquí

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

mugur, su código no funcionó para mí en Firefox o Safari, requería la forma de la date var (que obtuve de aquí ). 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, como se mantiene la función anterior, no cuenta para el relleno de ceros a la izquierda, por lo que la matriz de dates debe cambiarse a:

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

Tarde a la fiesta, pero aquí hay un JSFiddle que solía probar:

https://jsfiddle.net/gq6kdoc9/

HTML:

  

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

¡Basado en el ejemplo de trabajo de Mike anterior!