Angular2中如何监听ngbDateTimePicker的变更事件？

我之前也踩过这个坑！ngbDatepicker的事件绑定确实和普通输入框不太一样，普通的click或者ngModelChange经常会因为组件内部的逻辑不触发，给你几个亲测有效的解决办法：

1. 使用官方推荐的dateSelect事件 #

ngbDatepicker专门提供了dateSelect事件来监听用户通过选择器选中日期的行为，这是最可靠的方式，比ngModelChange更精准，不会受手动输入或其他操作干扰。

修改后的模板代码： #

<div class="input-group" *ngSwitchCase="'date'" [attr.for]="dynamic.key" >
  <input 
    class="form-control" 
    [type]="'text'" 
    placeholder="dd/mm/yyyy" 
    [minDate]="minDate" 
    [maxDate]="maxDate" 
    ngbDatepicker 
    #d1="ngbDatepicker" 
    [(ngModel)]="selectedDate"
    (dateSelect)="handleDateChange($event)" <!-- 新增这个事件绑定 -->
    [attr.data-required]="dynamic.required"
  >
  <!-- 通常还需要一个触发选择器的按钮，示例如下 -->
  <button class="btn btn-outline-secondary" (click)="d1.toggle()" type="button">
    <i class="bi bi-calendar"></i>
  </button>
</div>

组件TS代码： #

import { Component } from '@angular/core';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 组件元数据...
})
export class YourComponent {
  selectedDate: NgbDate | null = null;

  handleDateChange(selectedDate: NgbDate) {
    console.log('选中的日期对象:', selectedDate);
    // 如果需要转换成原生JS Date对象，可以这样处理：
    const jsDate = new Date(selectedDate.year, selectedDate.month - 1, selectedDate.day);
    console.log('转换后的JS Date:', jsDate);
    // 这里写你的业务逻辑
  }
}

2. 修复ngModelChange的使用问题 #

如果你坚持要用ngModelChange，需要确保是双向绑定（用[(ngModel)]而非单向[ngModel]），并且注意模型的类型是NgbDate | null，而不是字符串或其他类型：

模板代码： #

<input 
  ...
  [(ngModel)]="selectedDate"
  (ngModelChange)="onModelChange($event)"
>

TS代码： #

onModelChange(date: NgbDate | null) {
  if (date) {
    console.log('模型更新后的日期:', date);
    // 业务逻辑处理
  }
}

⚠️ 注意：ngModelChange会在模型任何更新时触发（包括手动输入日期，如果你的输入框允许的话），但有时候用户手动输入的格式不符合要求，可能会导致模型不更新，所以还是更推荐用dateSelect。

3. 基础检查 #

最后别忘了确认：

• 已经在你的Angular模块中导入了NgbDatepickerModule和NgbModule
• 选择器的#d1="ngbDatepicker"模板引用变量正确，没有拼写错误
• minDate和maxDate的格式是NgbDate类型，而非字符串

内容的提问来源于stack exchange，提问作者raghav