如何在ngx-bootstrap datepicker中的放假日期显示放假消息

Question

当前，我正在使用ngx-bootstrap datepicker进行约会计划。我禁用了周末和假期日期，但是要求是，当我们将鼠标悬停在假期日期时，应该在工具提示中显示假期消息。

这是我的ngx-bootstrap日期选择器。每当我将鼠标悬停在8月13日或15日时，它都会在工具提示中显示一条正确的消息。
那么，有什么解决方案可以解决我的问题吗？

Answer 1

**警告此答案需要进一步的工作/努力，旨在建议一种方法。

虽然这不是答案，但它可能会让您走上思路。

有点“脏”，必须有更好的方法吗？

在几天的鼠标悬停事件中，我无法在datepicker的API中找到任何内容，但是您可以尝试执行类似的操作。

处理onshown事件并添加自己的鼠标悬停事件。在td内的span标签上检测禁用的类，并添加title属性。

HTML

<input bsDatepicker  (onShown)="onShown()" [daysDisabled]="[6,0]"/>

TypeScript

onShown(): void {
    const el = document.body.querySelector('.bs-datepicker-body table tbody');

    if (null !== el) {
      el.addEventListener('mouseover', this.onClick.bind(this));
    }
  }


.
.
.
onClick(event) {
    if (event.target.tagName === 'SPAN' && event.target.getAttribute('class') === 'disabled') {
      event.target.setAttribute('title', 'Disabled because it\'s a holiday');
    }
.
.
.

26/07/2019编辑

昨晚在回家的路上对我说，这是令人讨厌的骇客。对该黑客稍作改进，就是避免添加会导致大量事件的鼠标悬停事件。

我的另一种解决方案是检测日历何时创建(onShown)，然后遍历元素并将即时的工具提示添加到禁用的元素。这可能是不需要鼠标悬停事件的更好解决方案。