Cómo resaltar fechas específicas en jQuery UI Datepicker

jQuery UI Datepicker es un plugin ampliamente utilizado que te brinda una manera sencilla de insertar un calendario en un campo input para seleccionar una fecha. Es decir, jQuery Datepicker se asocia con un campo input o un elemento inline para abrir un calendario interactivo. Además, es un plugin altamente configurable, ya que te permite personalizar la funcionalidad datepicker según tus necesidades.

Hay pocas opciones de personalización grandes están disponibles en jQuery UI Datepicker. En este artículo, conocerá los usos de la opción de configuración más útil beforeShowDay. La opción beforeShowDay permite modificar el día antes de que se muestre en el calendario. Aquí vamos a mostrar cómo resaltar fechas específicas en jQuery UI Datepicker usando la opción beforeShowDay.

La funcionalidad de resaltar fechas es necesaria cuando deseas remarcar fechas concretas en el calendario. Por ejemplo, si deseas marcar las fechas de eventos en el calendario, para ayudar al usuario a conocer la programación que manejas. En esta situación, puedes cambiar de manera sencilla el color de fondo o el color del texto y resaltar el intervalo de fechas de eventos específicos en tu acutal jQuery UI Datepicker con la opción beforeShowDay.

Antes de empezar, vamos a echar un vistazo a la opción beforeShowDay de jQuery UI Datepicker.
La función beforeShowDay coge una fecha y devuelve un array con:

    [0]: true / false indicando si la fecha es o no seleccionable
    [1]: un nombre de clase CSS para agregar a la celda de la fecha
    [2]: un popup opcional para esa fecha

Se llama a esta función en cada día del datepicker antes de mostrarlo.

Javascript

Lo primero que debemos hacer es incluir las librerías de jQuery y jQuery UI.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

Define un array de fechas específicas, que serán las que luego resaltaremos en el calendario. El siguiente código crea un array de fechas, que se asignan a la variable eventDates.

// An array of dates
var eventDates = {};
eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
eventDates[ new Date( '08/23/2016' )] = new Date( '08/23/2016' );

Ahora vamos a utilizar la opción beforeShowDay de jQuery UI Datepicker, a la cual llamaremos en cada uno de los días, antes de mostrar el calendario. En la función beforeShowDay, verificamos si la fecha coincide con la fecha específica, y si es así le agregamos una clase a la información. Esta clase a agregar te ayudará a cambiar el color de fondo o el color del texto de las fechas específicas del calendario.

// datepicker
$('#datepicker').datepicker({
    beforeShowDay: function( date ) {
        var highlight = eventDates[date];
        if( highlight ) {
             return [true, "event", 'Tooltip text'];
        } else {
             return [true, '', ''];
        }
    }
});

El código completo de Javascript para resaltar fechas específicas sería:

$( function() {
    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
    eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
    eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
    eventDates[ new Date( '08/23/2016' )] = new Date( '08/23/2016' );
    
    // datepicker
    $('#datepicker').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                 return [true, "event", 'Tooltip text'];
            } else {
                 return [true, '', ''];
            }
        }
    });
});

HTML

El jQuery UI Datepicker se asigna a un campo input o a un div específico.

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

o

Date: <input type="text" id="datepicker">

CSS

El siguiente código CSS resaltará las fechas dadas en el array de antes, en el calendario de jQuery UI Datepicker.

.event a {
    background-color: #5FBA7D !important;
    color: #ffffff !important;
}

Fuente: codexworld.com