Skip to content

Enable only specific dates of every month

Keke edited this page Jul 17, 2019 · 1 revision

Enable only specific (first, 15th and last) dates of every month.

<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" 
    #dp="angular-mydatepicker" (calendarViewChanged)="onCalendarViewChanged($event)">
import {IAngularMyDpOptions, IMyCalendarViewChanged} from 'angular-mydatepicker';

export class MyApp {
    myDatePickerOptions: IAngularMyDpOptions = {
        dateFormat: 'dd.mm.yyyy',
        dateRange: false,
        // disable all dates by default
        disableDateRanges: [{
            begin: {year: 1000, month: 1, day: 1}, 
            end: {year: 9999, month: 12, day: 31}
        }]
        // other options here
    }

    constructor() {}

    onCalendarViewChanged(event: IMyCalendarViewChanged) {
        // enables first, 15th and last date of month
        let copy: IMyDpOptions = this.getCopyOfOptions();
        copy.enableDates = [
            {year: event.year, month: event.month, day: 1},
            {year: event.year, month: event.month, day: 15},
            {year: event.year, month: event.month, day: event.last.number}
        ];
        this.myDatePickerOptions = copy;
    }

    // get copy of options
    getCopyOfOptions(): IAngularMyDpOptions {
        return JSON.parse(JSON.stringify(this.myDatePickerOptions));
    }
}