angularngb-datepicker

Ngb Date Picker minDate and maxDate not working as expected


I have used ngbDatePicker for selecting multiple dates.

I want to disable date before the current date.

But when I use minDate directive only the past month was disabled not the dates before to-day.

Template:

<ngb-datepicker #dp   [minDate]="minDate" [maxDate]="maxDate" [displayMonths]="2" [dayTemplate]="t">
</ngb-datepicker>

<ng-template #t let-date="date" let-focused="focused">
  <span class="custom-day" (click)="onDateSelection($event,date)"
        [class.focused]="focused"
        [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        [class.selected]="isDateSelected(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

I have stack-blitz example


Solution

  • If you don't want to delete that custom date template, you need to handle disabled attribute in the template.

    Here's updated Stackblitz with the dayTemplate