Question

我正在尝试在某些禁用日期添加工具提示作为假期原因，但在悬停时无法显示它们。我甚至尝试添加自定义悬停功能但没有成功。

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);
    }
});

holidays_dates变量由禁用的日期和原因组成，并且完美地将原因添加到元素的标题

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

如上所述，在标签的title属性中添加了假日原因但是在该日期上空悬停并未显示工具提示

Answer 1

要禁用日期并显示工具提示，请使用ShowDay之前的选项。

-ScriptBlock {$scriptpath} -ArgumentList "Y" | Out-File -FilePath C:\Users\admin\Desktop\WinPatch.txt

-ScriptBlock {param($p); . $p "Y"} -ArgumentList $scriptpath

并自定义禁用日期的css

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]];
    }
}

}

点击日期字段时，调用上述函数，即changeDisableDateColor。 function changeDisableDateColor(){ var unselectableDate = $('.ui-datepicker-unselectable a'); unselectableDate.css({ background: 'red', cursor: 'context-menu', border: 0 });

以及onChangeMonthYear（检测月份或年份的变化）选项内

$('#datepicker').click(function() {
        changeDisableDateColor();
});

使用

setTimeout是因为jquery ui删除了所有日期项并再次添加，因此我们等到日期正确为止。如果没有setTimeout onChangeMonthYear: function(){ setTimeout(function(){ changeDisableDateColor(); }); }，则会给出上一个日期。

这是jsfiddle：http://jsfiddle.net/Xx4GS/1225/

希望我回答了这个问题。

编辑：

有一个错误，当日期或月份为一位数字（即1-9）时，日期将不匹配，因此不会被禁用。

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

通过在日期和月份前添加0来修复该错误。

这是已解决的js小提琴：http://jsfiddle.net/Lf5p3hct/2/

Answer 2

我在使用 JQuery 3.3.1 时遇到了同样的问题。我通过添加 CSS 解决了这个问题。
尝试在您的 CSS 文件中添加以下内容：

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

这将删除由 CSS 类 pointer-events: none; 设置的属性 ui-state-disabled。

CSS 中的

Hightlighted 部分必须更改为您添加到 beforeShowDay() 中的日期字段的任何 CSS 类。

如何在jquery datepicker的禁用日期显示工具提示

2 个答案: