如何在 ngx-bootstrap datepicker 上的月份发生变化时触发事件？

Question

我们正在使用 ngx-bootstrap，我们需要一个日期选择器。所以ngx-bootstrap 的 Datepicker似乎是一个显而易见的选择。当用户导航到下个月时，我们希望加载日历的可用日期。为此，我们想订阅一些事件。我在文档中没有看到这样的事件。但我确实在（常规）引导程序变体 datepicker 的文档中看到了它。我尝试了各种方法，甚至进入 dom 并为单击事件添加事件侦听器。这有效了 1 次，然后可能会重新渲染 UI 并重新创建按钮。最后的手段似乎要么使用 MutationObserver （非常痛苦），要么下载日期选择器的源代码并将其破解（也很痛苦）。这似乎是一件微不足道的事情：知道日历的月份何时变化。但我还没有到达那里。任何帮助深表感谢！

Answer 1

可以通过使用商店内部的日期选择器来实现。是的，我知道这是私人的。因此也许不是最干净的解决方案。但由于似乎没有公共 API，我别无选择。我确实需要知道用户何时在日历上看到不同的月份，以便有效加载该月的可用日期。

以下代码用于订阅日期选择器的存储并在日期选择器的视图更改时获取通知。当月份发生变化时，您将收到通知。

import { BsDatepickerInlineDirective } from 'ngx-bootstrap/datepicker';
import { BehaviorSubject } from 'rxjs';

interface BsDatePickerStoreView {
  date: Date,
  mode: keyof { 'day', 'month', 'year'}
}

interface BsDatePickerStoreData {
  view:BsDatePickerStoreView
}

export class BsDatePickerUtils
{
  public viewChanged = new BehaviorSubject<Date>(undefined);

  private lastKnownViewDate: Date = undefined;

  constructor(datePicker: BsDatepickerInlineDirective) {
    const store = (datePicker as any)._datepicker.instance._store.source as BehaviorSubject<BsDatePickerStoreData>;
    store.subscribe((data) => {
      const viewMode = data.view.mode;
      const date = data.view.date as Date;
      if (!this.lastKnownViewDate || this.lastKnownViewDate.toDateString() !== date.toDateString()) {
        if (data.view.mode === 'day') {
          this.lastKnownViewDate = date;
          this.viewChanged.next(data.view.date);
        }
      }
    });
  }
}

这是一个简单的用法示例

// Usage example
@Component({
  selector: 'my-component',
  template: `
<div>
  <bs-datepicker-inline #datePicker></<bs-datepicker-inline>
</div>
  `
})
export class MyComponent implements OnInit, AfterViewInit {

  @ViewChild(BsDatepickerInlineDirective) datePicker: BsDatepickerInlineDirective;
  bsDatePickerUtils: BsDatePickerUtils;

  ngAfterViewInit() {
    this.bsDatePickerUtils = new BsDatePickerUtils(this.datePicker);
    this.bsDatePickerUtils.viewChanged.subscribe(date => {
      console.log('Calendar changed: ' + date);
    });
  }
}