3

我在 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>
4

1 回答 1

15

我以前也遇到过，我就是这样解决的。请记住导入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">
于 2019-02-19T07:32:23.577 回答