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
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/