javascript - How to show tooltip on disabled dates of jquery datepicker - Stack Overflow

admin管理员组

文章数量:1415491

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

Share Improve this question Follow edited Jun 13, 2018 at 14:37 vronjec 25911 silver badge1313 bronze badges asked Jun 13, 2018 at 14:07 Pavan Kumar T SPavan Kumar T S 1,55922 gold badges1818 silver badges2626 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to show tooltip on disabled dates of jquery datepickerStack Overflow