Как отключить прошлые даты, используя плагин ngbDatePicker на Angular

Question

Я использую плагин ngbDatePicker в Angular, я пробовал весь код JavaScript в HTML, но ничего не работает. 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">