如何在ng-Bootstrap中选择起始日期时清空结束日期

1. 组件类中维护日期模型并处理选择逻辑 #

在你的Angular组件类里，定义两个变量分别绑定起始和结束日期，然后在日期选择事件方法中，判断选中的是起始日期时直接清空结束日期的模型：

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

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  fromDate: NgbDateStruct | null = null;
  toDate: NgbDateStruct | null = null;
  minDate: NgbDateStruct | null = null; // 假设你已定义该变量的取值逻辑

  impOnDateSelection(event: NgbDateStruct, type: string): void {
    if (type === 'from') {
      this.fromDate = event;
      // 选中起始日期时，清空结束日期
      this.toDate = null;
    } else if (type === 'to') {
      this.toDate = event;
    }
  }
}

2. 更新HTML模板，绑定双向模型 #

修改原有HTML代码，给两个日期输入框添加双向绑定，确保模型变化能同步到视图显示：

<form class="row row-cols-sm-auto" *ngIf="showDateRangeImp">
    <div class="col-12">
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="dpFrom" ngbDatepicker #d1="ngbDatepicker"
                (dateSelect)="impOnDateSelection($event,'from')" [maxDate]="minDate" [(ngModel)]="fromDate" />
            <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d1.toggle();" type="button"></button>
        </div>
    </div>
    <div class="col-12">
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="dpTo" ngbDatepicker #d2="ngbDatepicker"
                (dateSelect)="impOnDateSelection($event,'to')" [maxDate]="minDate" [(ngModel)]="toDate" />
            <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d2.toggle();" type="button"></button>
        </div>
    </div>
</form>

关键说明 #

• 给两个输入框设置了不同的name属性（dpFrom和dpTo），避免表单控件命名冲突。
• 通过[(ngModel)]实现双向绑定，当toDate被置为null时，输入框会自动清空内容。
• 核心逻辑是在起始日期选中事件触发时，直接重置结束日期的绑定模型，无需额外操作视图控件。

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