Angular 5 ng-bootstrap datepicker Disable specific dates from array

Question

I'm using the bootstrap datepicker from this link. The issue that I have is how to disable specific dates from an array. So far I've been able to disable Saturday and Sunday from the calendar.

My array would contain all the dates i get from my service and from then depending on those dates, I would have to mark them as disable on the calendar.

.ts

import { NgbActiveModal, NgbDateParserFormatter, NgbCalendar, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

const now = new Date();

@Component({
  selector: 'app-leaves-modal',
  templateUrl: './leaves-modal.component.html',
  styleUrls: ['./leaves-modal.component.css']
})
export class LeavesModalComponent implements OnInit {
  public leavesTypes: Array<LeaveApproval> = [];
  leaveEntitled: number;
  leaveTaken: number;
  leaveEntitledId: number;
  date: Date;

  constructor(
    private formBuilder: FormBuilder,
    public activeModal: NgbActiveModal,
    private ngbDateParserFormatter: NgbDateParserFormatter,
    private ngbCalendar: NgbCalendar,
  ) {
    this.getLeaves();
    this.getLeavesApproved();
  }

  minDate: NgbDateStruct = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };

  ngOnInit() {
    this.createForm();
  }

  getLeavesApproved() {
    this.leaveManager.getApprovalDates().subscribe(res => {
      for (var i = 0; i < res.length; i++) {
        let a: any = res[0].startDate;
        this.date = new Date(a);
      }
    });
  }

  isDisabled(date: NgbDateStruct) {
    const d = new Date(date.year, date.month - 1, date.day);
    return d.getDay() === 0 || d.getDay() === 6;
  }

  getLeaves() {
    this.leaveManager.getLeaves().subscribe(res => {
      this.leavesTypes = res;
    });
  }
 }

.html

    <div class="modal-header">
    <h4 class="modal-title">Submit Leave Request</h4>
    <button type="button" class="close" aria-label="Close" 
    (click)="activeModal.dismiss('Cross click')">
    </button>
    </div>
    <form [formGroup]="myForm" (ngSubmit)="submitForm()">
    <div class="modal-boy">
        <div class="container">
            <div class="row">
                <div class="form-group col-sm-4">
                    <label for="vacationType">Reason</label>
                    <select class="form-control" id="vacationType" 
        name="vacationType" formControlName="vacationType">
                        <option *ngFor="let leave of leavesTypes" 
        [ngValue]="leave.id">{{leave.name}}</option>
                  </select>
                </div>
                <div class="form-group col-sm-4">
                    <label for="startDate">Start Date</label>
                    <input class="form-control" [minDate]="minDate" 
        [markDisabled]="isDisabled" placeholder="yyyy-mm-dd" name="startDate" 
        formControlName="startDate" ngbDatepicker #d1="ngbDatepicker" 
        (click)="d1.toggle()" required>
                </div>
                <div class="form-group col-sm-4">
                    <label for="endDate">End Date</label>
                    <input class="form-control" [minDate]="minDate" 
        [markDisabled]="isDisabled" placeholder="yyyy-mm-dd" name="endDate" 
        formControlName="endDate" (blur)="compareDates()" ngbDatepicker 
        #d2="ngbDatepicker" (click)="d2.toggle()" required>
                </div>
                <div class="form-group col-sm-8">
                    <div *ngIf="error.isError" class="alert alert-danger">
                        {{ error.errorMessage }}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 col-sm-6">
                    <!-- <app-balance-card></app-balance-card> -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" [disabled]="!myForm.valid || error.isError">
      Submit Form
    </button>
    </div>
</form>

Answer 1

I found this thread before few days, this looks interesting you can implement for your scenario too.

There is one property called markDisabled which you can use in your scenario

initialize it like this in your component

  markDisabled;

and then wherever you call the service you can update the variable with the function

  this.markDisabled = (date: NgbDate) => calendar.getWeekday(date) >= 6;

remember in your case implementation can be different which you need to take care of.

and use it in the view like this

<ngb-datepicker [(ngModel)]="model" [markDisabled]="markDisabled"></ngb-datepicker>

demo