I am trying to add tooltip on some disabled dates as holiday reason but unable get them displayed when hovered. i have even tried adding custom hover function but no success.

availableDates = ["09/04/2018", "09/05/2018", "09/06/2018", "08/31/2018", "09/01/2018"];
holidays_dates = { "09/02/2018": "sgsdf", "05/27/2018": "home sick", "08/20/2018": "fcg", "05/26/2018": "i dont know", "05/25/2018": "home sick" }

function available(date) {

    var moth = String(date.getMonth() + 1);
    if (moth.length == 1) {
        moth = "0" + moth;
    }

    var dat = String(date.getDate());
    if (dat.length == 1) {
        dat = "0" + dat;
    }
    dmy = moth + "/" + dat + "/" + date.getFullYear();

    if ($.inArray(dmy, availableDates) != -1) {
        return [true, ""];
    } else if (dmy in holidays_dates) {
        console.log(dmy)
        return [false, "Highlighted", holidays_dates[dmy]];
    } else {
        return [false, ""];
    }
}


$("#datepicker").datepicker({
    beforeShowDay: function (dt) {
        return available(dt);
    },
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {
        getslots(dateText, selected_consultant);
    }
});

the holidays_dates variable consists of disabled date and reason and is perfectly adding the reason to the title of the element

<td class=" ui-datepicker-unselectable ui-state-disabled Highlighted" title="home sick">
    <span class="ui-state-default">25</span>
</td>

as above holiday reason added in title attribute of tag but hovering on that date does not show tooltip

I am trying to add tooltip on some disabled dates as holiday reason but unable get them displayed when hovered. i have even tried adding custom hover function but no success.

availableDates = ["09/04/2018", "09/05/2018", "09/06/2018", "08/31/2018", "09/01/2018"];
holidays_dates = { "09/02/2018": "sgsdf", "05/27/2018": "home sick", "08/20/2018": "fcg", "05/26/2018": "i dont know", "05/25/2018": "home sick" }

function available(date) {

    var moth = String(date.getMonth() + 1);
    if (moth.length == 1) {
        moth = "0" + moth;
    }

    var dat = String(date.getDate());
    if (dat.length == 1) {
        dat = "0" + dat;
    }
    dmy = moth + "/" + dat + "/" + date.getFullYear();

    if ($.inArray(dmy, availableDates) != -1) {
        return [true, ""];
    } else if (dmy in holidays_dates) {
        console.log(dmy)
        return [false, "Highlighted", holidays_dates[dmy]];
    } else {
        return [false, ""];
    }
}


$("#datepicker").datepicker({
    beforeShowDay: function (dt) {
        return available(dt);
    },
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {
        getslots(dateText, selected_consultant);
    }
});

the holidays_dates variable consists of disabled date and reason and is perfectly adding the reason to the title of the element

<td class=" ui-datepicker-unselectable ui-state-disabled Highlighted" title="home sick">
    <span class="ui-state-default">25</span>
</td>

as above holiday reason added in title attribute of tag but hovering on that date does not show tooltip

• javascript
• jquery
• html
• jquerydatetimepicker

• You are on the right track. The third element of the array returned by function that is called by beforeShowDay is the tooltip text. So returning [false, "", "Fathers Day"] would show "Fathers Day" on hover of the disabled date. – Ejaz Commented Oct 20, 2022 at 9:45

2 Answers 2

To disable the date and show tooltip use option beforeShowDay.

beforeShowDay: function (date) {
    var formattedDate = $.datepicker.formatDate('mm/dd/yy', date),
        checkDisable = disabledDates.indexOf(formattedDate) == -1;

    if(checkDisable == true){
        return [checkDisable];
    }else{
    //add ui-datepicker-unselectable class to the disabled date.
      return [!checkDisable,'ui-datepicker-unselectable',holidays_dates[formattedDate]];
    }
}

and customize the css of the disabled date

function changeDisableDateColor(){
    var unselectableDate = $('.ui-datepicker-unselectable a');

    unselectableDate.css({
        background: 'red',
        cursor: 'context-menu',
        border: 0
    });
}

call the above function i.e changeDisableDateColor when date field is clicked. $('#datepicker').click(function() { changeDisableDateColor(); });

and also inside onChangeMonthYear (detects the change in month or year) option

onChangeMonthYear: function(){
  setTimeout(function(){
    changeDisableDateColor();
  });
}

setTimeout is used because the jquery ui removes all the dates item and add again, so we wait until we have right date. Without setTimeout var unselectableDate = $('.ui-datepicker-unselectable a'); will give previous date.

Here is the jsfiddle: http://jsfiddle/Xx4GS/1225/

Hope I answered the question.

Edited:

There was bug, when day or month is of single digit ie 1-9 then the date does not get matched and will not be disabled.

if(month.toString().length == 1){
    month = '0'+month.toString();
}

if(day.toString().length == 1){
    day = '0'+ day.toString();
}

Fixed the bug by adding 0 in front of day and month.

Here is the solved js fiddle: http://jsfiddle/Lf5p3hct/2/

I had the same issue with JQuery 3.3.1. I solved this by just adding CSS.
Try adding the following in your CSS file:

.ui-datepicker-calendar > .ui-state-disabled.Highlighted {
    pointer-events: initial;
}

This will remove the attribute pointer-events: none; that is set by the CSS class ui-state-disabled.

Hightlighted part in the CSS has to be changed to whatever CSS class that you add to the date field in beforeShowDay().