ngx-bootstrap datepicker上的月份更改时如何触发事件？答案

【问题标题】：How to trigger an event when the month changes on ngx-bootstrap datepicker?ngx-bootstrap datepicker上的月份更改时如何触发事件？
【发布时间】：2020-10-30 12:15:37
【问题描述】：

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

【问题讨论】：

嗨！似乎您可以为这两个按钮添加侦听器，您是否将其与 visibility events 结合使用？

标签： angular events datepicker ngx-bootstrap

【解决方案1】：

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

这里是订阅 datepicker 的 store 并在 datepicker 的视图发生变化时收到通知的代码。当月份更改时，您将收到通知日期。

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);
    });
  }
}

【讨论】：