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的实现，指定何时开始和结束您的选择器。

这里有一个例子：

HTML ：

<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>

Component.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';
  }

您还可以使用此功能停用特定日期，请按此link了解详情，查看：＆＃39;全球配置日期选择器＆＃39;部分。

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()
  };
}

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

2 个答案: