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

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

0 голосов
/ 19 февраля 2019

Я использую плагин 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>

1 Ответ

0 голосов
/ 19 февраля 2019

Я сталкивался с этим раньше, вот как я это решил.Не забудьте импортировать 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 применяется только в том случае, если вы используете реактивные формы.Если это не так, не стесняйтесь игнорировать его.

[EDIT] Как указал @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">
...