如何在 Angular 上使用 ngbDatePicker 插件禁用过去的日期

Question

我在 Angular 中使用 ngbDatePicker 插件，我已经尝试了 html 中的所有 javascript 代码，但没有任何效果。 Pastdate 仍然可以选择。

这是 html 代码

<div class="col-xs-6">
  <label><i class="far fa-calendar-alt"></i> Start <span class="text-danger">*</span></label>
   <input id="startTrip1" data-provide="datepicker" ngbDatepicker #d="ngbDatepicker" type="text" class="form-control form-flat" [(ngModel)]="ad.start_date" (dateSelect)="onDateSelect($event, ad)" (blur)="validateInput()" (click)="d.toggle()" [ngModelOptions]="{standalone: true}" [disabled]="form.controls.tripduration.hasError('required')" >
      <div class="text-danger" *ngIf="(ad.start_date == '' || ad.start_date == undefined) && ngForm.submitted">
      * This field is required
     </div>
</div>

Answer 1

我以前也遇到过，就是这样解决的。请记住将 NgbDatepickerConfig 导入您的 component.ts。

import { NgbDatepickerConfig, . . . } from '@ng-bootstrap/ng-bootstrap';
.
.
constructor(private config: NgbDatepickerConfig) {
  const current = new Date();
  config.minDate = { year: current.getFullYear(), month: 
  current.getMonth() + 1, day: current.getDate() };
    //config.maxDate = { year: 2099, month: 12, day: 31 };
  config.outsideDays = 'hidden';
}

并在 component.html、

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

formControlName 仅在您使用反应式表单时适用。如果不是，请忽略它。

[编辑] 正如@Eliseo 在评论中指出的那样，使用 minDate 就足够了，这样它就不会影响 Datepicker 的所有其他实例。在你的 component.ts、

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

}

并且在您的 component.html 上，使用 [minDate] 输入绑定

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

如何在 Angular 上使用 ngbDatePicker 插件禁用过去的日期

How to disable past dates using ngbDatePicker Plugin on Angular

angular

ngb-datepicker