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

Question

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

这是我的 ngx-bootstrap 日期选择器。每当我将鼠标悬停在 8 月 13 日或 15 日时，它都应该在工具提示中显示正确的消息。
那么我的问题是否有任何解决方案。

Answer 1

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

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

有点“脏”，一定有更好的办法吗？

我在日期选择器的 API 中找不到任何针对鼠标悬停事件的日期，但您可以尝试类似的方法。

处理 onshown 事件并添加您自己的 mouseover 事件。检测 td 中 span 标签上的 disabled 类，并添加 title 属性。

HTML

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

打字稿

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 编辑

昨晚在回家的路上，我发现这是令人讨厌的黑客行为。对这个 hack 的一点改进是避免添加会导致很多事件的 mouseover 事件。

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