如何在Angular 4中禁用ngbDatepicker的过往日期？

要实现禁用ngbDatepicker里的所有过往日期，只需要利用组件自带的minDate属性来限制可选的最小日期即可，操作起来非常直观。下面是具体的实现步骤：

1. 在组件类中配置最小日期 #

首先在你的组件.ts文件里，导入NgbDateStruct和NgbCalendar，通过注入NgbCalendar来获取当前日期，将其设置为允许选择的最小日期：

import { Component } from '@angular/core';
import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  formModel: FormGroup;
  minDate: NgbDateStruct;

  constructor(private fb: FormBuilder, private calendar: NgbCalendar) {
    // 保持你原有的表单初始化逻辑
    this.formModel = this.fb.group({
      startDate: ['']
    });
    
    // 获取今日日期作为最小可选日期
    this.minDate = this.calendar.getToday();
  }
}

如果你的需求是只能选择明天及以后的日期（排除今天），可以用NgbCalendar的getNext方法来安全获取下一天的日期（自动处理月末、年末的日期跳转）：

this.minDate = this.calendar.getNext(this.calendar.getToday(), 'd', 1);

2. 修改HTML模板绑定minDate #

在你现有的input元素上，添加[minDate]="minDate"的绑定，把组件中定义的最小日期传递给ngbDatepicker：

<input 
  required 
  class="form-control" 
  placeholder="dd-MM-YYYY" 
  name="startDate" 
  ngbDatepicker 
  #d="ngbDatepicker" 
  [readonly]="true" 
  [formControl]="formModel.controls.startDate" 
  [ngClass]="{'has-error':!formModel.controls['startDate'].valid && formModel.controls['startDate'].touched}"
  [minDate]="minDate" <!-- 新增的绑定 -->
/>

这样配置完成后，datepicker里所有早于你设置的最小日期的选项都会被置灰，用户无法选择，完美实现禁用过往日期的需求。

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