angular - 如何在 ngx-bootstrap datepicker 上更改月份时触发事件？

Question

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

标签： angulareventsdatepickerngx-bootstrap

Answer 1

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

这是订阅 datepicker 的存储并在 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);
    });
  }
}