usage of disableDates option
Example below disable dates defined in the getDisabledStyles() method. It is also possible to disable dates by a default style. More information is here. Check the disableDates option.
<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" #dp="angular-mydatepicker">import {IAngularMyDpOptions, IMyDisabledDates, IMyDate} from 'angular-mydatepicker'; export class MyApp { myDatePickerOptions: IAngularMyDpOptions = { stylesData: { selector: 'dp1', styles: this.getDisabledStyles() }, disableDates: [] // other options here } constructor() {} // calling this method disable dates disabledDates(): void { let copy: IAngularMyDpOptions = this.getCopyOfOptions(); copy.disableDates = this.getDisabledDates(); this.myDatePickerOptions = copy; } // CSS styles getDisabledStyles(): string { return ` .dp1 .yogaDates { background: repeating-linear-gradient(-45deg, red 7px, #ccc 8px, transparent 7px, transparent 14px); font-weight: bold; color: green; } .dp1 .karateDates { background: repeating-linear-gradient(-45deg, blue 7px, #ccc 8px, transparent 7px, transparent 14px); font-weight: bold; color: green; } .dp1 .yogaAndKarateDates { background: #F08080; font-weight: bold; color: blue; } `; } // own style dates (10.6.2020 - 16.6.2020) getDisabledDates(): Array<IMyDisabledDates> { return [ {dates: [ {year: 2020, month: 6, day: 10}, {year: 2020, month: 6, day: 11}, {year: 2020, month: 6, day: 15}, ], styleClass: 'yogaDates'}, {dates: [ {year: 2020, month: 6, day: 12}, {year: 2020, month: 6, day: 13}, {year: 2020, month: 6, day: 14}, ], styleClass: 'karateDates'}, {dates: [ {year: 2020, month: 6, day: 16} ], styleClass: 'yogaAndKarateDates'} ]; } getCopyOfOptions(): IAngularMyDpOptions { return JSON.parse(JSON.stringify(this.myDatePickerOptions)); } }
