0

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

Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
NicoleZ
  • 1,485
  • 3
  • 22
  • 43

2 Answers2

1

Remove [dayTemplate]="t"

Try like this:

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

See Updated working Stackbiltz demo

Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
1

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

Dima Mamchur
  • 1,104
  • 9
  • 8
  • .this works fine is there any way to change. that unavailable data color in date picker – NicoleZ Sep 12 '19 at 12:25
  • 1
    Yes. You can change the styles to whatever you want. For example, i've replaced class for disabled elements to my own by doing ```[class.day-disabled]="disabled"``` and added corresponding changes to ```styles``` definitions in the component. Check out the stackblitz above - I've updated it. – Dima Mamchur Sep 12 '19 at 12:32