如何在Angular 4的ngbDatepicker中禁用上一个日期？

Question

我想禁用所有以前/过去的日期ngbDatepicker，我已经使用ngbDatepicker。
我的HTML是：

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

Answer 1

您可以创建 NgbDatepickerConfig 的实现，指定何时开始和结束您的选择器。

这里有一个例子：

网址：

<div class="form-group">
  <div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp"[markDisabled]="isDisabled" ngbDatepicker #d="ngbDatepicker">
    <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
    </button>
  </div>
</div>

组件.ts

constructor(config: NgbDatepickerConfig) { 

    const currentDate = new Date();

    config.minDate = {year:currentDate.getFullYear(), month:currentDate.getMonth()+1, day: currentDate.getDate()};
    config.maxDate = {year: 2099, month: 12, day: 31};

    config.outsideDays = 'hidden';
  }

您还可以使用此功能禁用特定日期，点击此链接了解更多信息，检查：“日期选择器的全局配置”部分。

Answer 2

对不起，来晚了。我刚刚遇到了这个问题，上面的答案使的属性发生了变化NgbDatcConfig。该解决方案可以正常工作，但是会影响所有其他NgbDatepicker实例。推荐的方法是利用API[minDate]上规定的输入绑定。

您可以在component.html上以这种方式使用它，

 <input class="form-control" ngbDatepicker [minDate]="minDate" (click)="datePicker.toggle()" #datePicker="ngbDatepicker"" placeholder="yyyy-mm-dd">

在您的component.ts上，您可以minDate按以下方式进行定义：

minDate = undefined;
.
. 
constructor(private config: NgbDatepickerConfig) {
  const current = new Date();
  this.minDate = {
    year: current.getFullYear(),
    month: current.getMonth() + 1,
    day: current.getDate()
  };
}