How to disable previous date in ngbDatepicker in Angular 4?

user8944795 picture user8944795 · Mar 29, 2018 · Viewed 7.6k times · Source

I want to disable all the previous/past date in ngbDatepicker, I have used ngbDatepicker.
My HTML is:

<input required class="form-control" placeholder="dd-MM-YYYY" name="startDate" required ngbDatepicker #d="ngbDatepicker"
            [readonly]="true" [formControl]="formModel.controls.startDate" [ngClass]="{'has-error':!formModel.controls['startDate'].valid && formModel.controls['startDate'].touched}" />

Answer

KingDSL picture KingDSL · Jun 13, 2018

You could create an Implementation of NgbDatepickerConfig specifying when starts and ends your picker.

Here you have an example:

Html:

<div class="form-group">
  <div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp"[markDisabled]="isDisabled" ngbDatepicker #d="ngbDatepicker">
    <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
    </button>
  </div>
</div>

Component.ts

constructor(config: NgbDatepickerConfig) { 

    const currentDate = new Date();

    config.minDate = {year:currentDate.getFullYear(), month:currentDate.getMonth()+1, day: currentDate.getDate()};
    config.maxDate = {year: 2099, month: 12, day: 31};

    config.outsideDays = 'hidden';
  }

You can also disable specific dates using this feature, follow this link for more info, check: 'Global configuration of datepickers' section.