Ng Bootstrap Date Range Picker [markdisabled] Doesn't Work On Input

I'm trying to disable certain dates on ng bootstrap range picker Currently, I have a range picker inside a pop-up, and I am using [markDisabled] to disable certain dates. HTML &l

Solution 1:

I am not sure why, but somehow, your custom Day Template (ng-template let-date="date") seem to have prevented the disabled dates from being rendered/marked as disabled on the popout calender. You might have overwritten some properties by accident.

I haven't had an in-depth look at your code, but I have tried the following and it seems to work.

First, on your component.html, I have made use of the disabled property which is part of the DayTemplateContext. After which I set the text-muted class as true, for disabled dates. This will give the greyed out appearance for disabled dates. Do make sure that your

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

On your component.ts, I have made the following changes to your onDateSelection() method. This is not very elegant, but it does the job for now. I have basically wrapped it with an if-statement to check if the date is on the 13th (which is the disabled date). This will prevent the date itself from being selected.

onDateSelection(date: NgbDateStruct) {
  let parsed = '';
  if (date.day!==13) {
   .
   .
   // rest of your code
   }
}

EDITED: Thanks @Eliseo for the tips, and yes, we can simply add check for disabled on the click event. This way, there is no need for that if-statement on your onDateSelection() statement. I have updated the demo to reflect the changes.

<ng-template#t let-date="date" let-focused="focused" let-disabled="disabled">
  <span class="custom-day" 
  [class.text-muted]="disabled"
  [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
  [class.faded]="isHovered(date) || isInside(date)"
  (click)="!disabled && onDateSelection(date)"
  (mouseenter)="hoveredDate = date"
  (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

You may refer to my demo here