How to show tooltip on disabled dates of jquery datepicker

Question

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

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, Oct 20 '22 at 09:45

score 4 · Accepted Answer · edited Apr 16 '20 at 17:05

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.net/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.net/Lf5p3hct/2/

How would you implement `noWeekends` functionality? I would like to have the tooltip only on the holidays, so weekends should be just disabled. — vixero, Apr 25 '19 at 09:36
check for weekends inside beforeShowDay and add that date to the disabledDates array. Here is jsfiddle: http://jsfiddle.net/49vpmsg6/3/ — Rojen, Apr 25 '19 at 14:10

score 1 · Answer 2 · answered Feb 23 '21 at 01:28

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().

How to show tooltip on disabled dates of jquery datepicker

2 Answers2