angularangular6angular8ng-bootstrapangular-daterangepicker

Disable Specific Date in ng Bootstrap datepicker


I am using Angular 8 where I am using ngDatePicker for choosing Date

I am able to validate min and max date range **

Example

June month disable 15th and 17th of June 

July month disable 18th and 10 of july

But I am not able to do that I am able to disable only min date and max date and validation I am sharing my code

My Code :

datepicker.config.ts

import {Component} from '@angular/core';
import {NgbDatepickerConfig, NgbCalendar, NgbDate, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-config',
  templateUrl: './datepicker-config.html',
  providers: [NgbDatepickerConfig] // add NgbDatepickerConfig to the component providers
})
export class NgbdDatepickerConfig {

  model: NgbDateStruct;
  markDisabled;

  constructor(config: NgbDatepickerConfig, calendar: NgbCalendar) {
    // customize default values of datepickers used by this component tree
    config.minDate = {year: 2020, month: 6, day: 1};
    config.maxDate = {year: 2020, month: 7, day: 31};

    // days that don't belong to current month are not visible
    config.outsideDays = 'hidden';

   // call your service
    setTimeout(()=>{
     // this.markDisabled = (date: NgbDate, current: {month: number}) => date.day === 13;     
       this.markDisabled = (date: NgbDate) =>  calendar.getWeekday(date) >= 6; 
     
      //  console.log(calendar.getWeekday(calendar.getToday()))
    },2000)
   
  }
}

datepicker.config.html

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

link : https://stackblitz.com/edit/angular-ypqcv4-hxdcnj?file=app%2Fdatepicker-config.html


Solution

  • The date.month and date.day fields of the date: NgbDate object has to be used in conjunction to make it happen.

    this.markDisabled = (date: NgbDate, current: { month: number }) =>
    ((date.day === 15 || date.day === 17) && date.month === 6) || ((date.day === 10 || date.day === 18) && date.month === 7) || calendar.getWeekday(date) >= 6;