如何在jQuery日期选择器的禁用日期上显示工具提示

Question

如何在jQuery日期选择器的禁用日期上显示工具提示

javascriptjqueryhtmljquerydatetimepicker

3

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

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

假期日期变量

假期日期变量包括禁用的日期和原因，并且完美地将原因添加到元素标题中。

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

如上所述，假期原因已添加到标签的title属性中，但悬停在该日期上并不会显示工具提示。

- Pavan Kumar T S

你正在正确的轨道上。被 beforeShowDay 调用的函数返回的数组的第三个元素是工具提示文本。因此，返回 [false, "", "父亲节"] 将在禁用日期悬停时显示 "父亲节"。 - Ejaz

2个回答

2

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

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

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

在beforeShowDay()中添加到日期字段的任何CSS类都必须更改CSS中的Highlighted部分。

- Shogo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rojen · Accepted Answer

要禁用日期并显示工具提示，请在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]];
    }
}

并自定义禁用日期的CSS样式

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

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

当单击日期字段时，请调用上述函数changeDisableDateColor。

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

并且在onChangeMonthYear（检测月份或年份更改）选项内部也要调用该函数。

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

setTimeout被用于jquery ui删除所有日期项并重新添加后，我们需要等待正确的日期。如果没有setTimeout，则var unselectableDate = $('.ui-datepicker-unselectable a');将给出前一个日期。

这是jsfiddle链接：http://jsfiddle.net/Xx4GS/1225/ 希望我回答了你的问题。

编辑：

存在bug，当日期或月份为单个数字时，即1-9，则日期不会匹配并且不会被禁用。

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

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

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

这是已解决的jsfiddle: http://jsfiddle.net/Lf5p3hct/2/