I am using Angular 8 where I am using ngDatePicker for choosing Date
I am able to validate min and max date range **
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
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;