<ngb-datepicker (select)="onDateSelect($event)" [(ngModel)]="datePickerModel"></ngb-datepicker>

 <ngb-timepicker [meridian]="meridian" [(ngModel)]="time" class="fromTimePick">

How to disable the calendar dates for past days i.e. disabling days before today and time before now (ie disable past time before current time with respect to current date) ?

1 Answers

wentjun On Best Solutions

For ngb-datepicker, you can set the minDate input binding to disable past dates:

<ngb-datepicker (select)="onDateSelect($event)" [(ngModel)]="datePickerModel"[minDate]="todayDate">

And on your component.ts, you set todayDate as today.

const current = new Date();
this.todayDate = {
  year: current.getFullYear(),
  month: current.getMonth() + 1,
  day: current.getDate()


As for the timepicker, you cannot explicitly disable the hours/minutes picker using the ng-boostrap API, but what I can suggest is to write your custom validation outside the timepicker to prevent the user from submitting a form whereby the time is invalid?