How To Highlight Selected Dates In Date Picker

Question

First is there a way to not highlight the current day. Second is there a way to highlight specific days like the way the current day was highlighted?

Here is the co

Answer 1

Use beforeShowDay option of jQuery UI date-picker to highlight selected dates in date-picker. Here the simple code:

$( 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' );

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

The above JavaScript will add event class on selected dates. Now you will need to define the style for selected dates. For the complete guide, you can check the source link mentioned above.