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

},

这里来自 ShowDay 之前的 Jquery UI Datepicker 官方文档 here

beforeShowDay

Type: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date

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 .