Question

我在Angular中使用ngbDatePicker插件，我已经尝试了html中的所有javascript代码，但没有任何效果。过去的日期仍可启用。

这是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插件禁用过去的日期

1 个答案: