Angular使用ngb date picker时如何禁用过去日期仅可选今日及以后日期

你现有代码已经预留了[markDisabled]配置，可直接补全逻辑，也可以使用更简洁的minDate属性实现需求，两种方案如下：

方案1：复用现有markDisabled配置 #

无需修改模板代码，仅需要在对应的组件.ts文件中补充判断逻辑即可：

1. 首先导入依赖的类型（如已导入可跳过）：

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

2. 组件类中添加如下代码：

// 初始化当前日期，格式匹配ngb日期组件要求的结构
const currentDate = new Date();
today: NgbDateStruct = {
  year: currentDate.getFullYear(),
  month: currentDate.getMonth() + 1,
  day: currentDate.getDate()
};

// 禁用规则：日期早于今天则返回true（禁用）
isDisabled = (date: NgbDateStruct): boolean => {
  if (date.year < this.today.year) return true;
  if (date.year === this.today.year && date.month < this.today.month) return true;
  if (date.year === this.today.year && date.month === this.today.month && date.day < this.today.day) return true;
  return false;
};

方案2：使用minDate属性（更简洁，交互更友好） #

如果只是需要单纯禁用所有过往日期，不需要复杂自定义规则，直接使用组件原生的minDate属性即可，无需编写禁用判断函数：

1. 修改模板代码，将原有的[markDisabled]="isDisabled"替换为[minDate]="today"：

<input class="form-control ngbfield" (dateSelect)="loadCheckinTime(checkin.checkdate)"
  placeholder="yyyy-mm-dd" required name="checkdate" [readonly]="true" #vl="ngModel"
  [(ngModel)]="checkin.checkdate" ngbDatepicker [minDate]="today"
  #d1="ngbDatepicker" required>
<div class="input-group-append">
  <button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()"
    type="button"></button>
</div>

2. 在组件.ts文件中定义today变量即可：

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

// 组件类中代码
const currentDate = new Date();
today: NgbDateStruct = {
  year: currentDate.getFullYear(),
  month: currentDate.getMonth() + 1,
  day: currentDate.getDate()
};

两种方案差异说明：

• minDate会自动禁用所有早于指定日期的年、月导航选项，用户无法翻到过往月份，交互更符合该需求的使用场景
• markDisabled仅禁用符合规则的日期，用户仍可正常查看过往月份，适合需要自定义复杂禁用规则的场景

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