當 ngx-bootstrap datepicker 上的月份發生變化時，如何觸發事件？

Question

我們正在使用 ngx-bootstrap，我們需要一個日期選擇器。 所以ngx-bootstrap 的 Datepicker似乎是一個顯而易見的選擇。 我們希望在用戶導航到下個月時加載日歷的可用日期。 為此，我們想訂閱一些事件。 我在文檔中沒有看到這樣的事件。 但我確實在（常規）引導程序變體 datepicker 的文檔中看到了它。 我嘗試了各種方法，甚至進入 dom 並為 click 事件添加一個事件偵聽器。 這是有效的，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);
    });
  }
}