Jquery UI Datepicker beforeShowDay 工具提示

Question

我发现 this 线程关于在 StackOverflow 上将工具提示添加到禁用日期，但无法弄清楚如何将其添加到我的代码中。

如果有人可以帮助我，我会很高兴。

到目前为止我的代码：

beforeShowDay: function(disabledDates) {
  //Concatenating All dates before they are sent in to beforeShowDay
  var localDateArray = parsedDates.concat(addWeekendToDisabled(), disableToday(), disableTomorrow());

  var string = jQuery.datepicker.formatDate('yy-mm-dd', disabledDates);
  return [localDateArray.indexOf(string) === -1];

},

这里来自Jquery UI Datepicker官方文档 beforeShowDay here

演出前

类型：函数（日期日期）
默认值：空
以日期为参数且必须返回一个数组的函数：
[0]：true/false 指示此日期是否可选
[1]：要添加到日期的 CSS 类名默认演示文稿的单元格或“”
[2]：此日期的可选弹出工具提示

Answer 1

这是我为另一个问题制作的旧CodePen...
您的问题的相关代码如下。

CSS 在禁用日期重新启用指针事件：

pointer-events:initial !important;

然后，在beforeShowDay 上，当您返回false 以禁用日期时，您还可以返回一个类（用于背景颜色，例如AND 指针事件）。
您可以使用该类将正确的工具提示消息从数组附加到禁用日期。

所以要附加必须在元素的title 属性中的消息，请在实例化日期选择器后执行以下操作：

$(document).find(".ui-state-disabled.red").attr("title",disabledReason[0]).tooltip();

---

编辑
看来选择日期后，我的把戏不起作用...
因为 DatePicker 是重新绘制的。

所以这里是绕行，使用onSelect 和setTimeout()：

onSelect: function(){
    setTimeout(function(){
        $(document).find(".ui-state-disabled.red").attr("title",disabledReason[0]).tooltip();
        $(document).find(".ui-state-disabled.green").attr("title",disabledReason[1]).tooltip();
    },10);
}

它正在第二个CodePen工作。