How to disable previous dates (not clickable)

[geethzz]

I am creating an inline datepicker with following functionalities.

1. It should be date range picker
2. The first 12 days with in the range should be in different color
3. Previous dates should be disabled (not active and clickable)

I have already achieved the first two criteria's, but don't know how to implement the third one.

This is what my calendar look like now. And I need to disable the dates before current date.

Here is my code

<div class="input-box-container"> <input angular-mydatepicker [min]="minDateValue" style="display: none;" class="input-box" placeholder="Click to select a date" angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" [(ngModel)]="model" [options]="myDpOptions" #dp="angular-mydatepicker" (dateChanged)="onDateChanged($event)" (rangeDateSelection)="onRangeDateSelection($event)" /> </div>

component.ts

`onRangeDateSelection(event: IMyRangeDateSelection): void {
let { isBegin, date, jsDate } = event;
let options: IAngularMyDpOptions = this.getCopyOfOptions();
if (isBegin) {
  this.ngxdp.writeValue({
    isRange: true,
    singleDate: null,
    dateRange: {
      beginDate: { year: 0, month: 0, day: 0 },
      endDate: { year: 0, month: 0, day: 0 }
    }
  });
  this.ngxdp.setHostValue('');
  let d = new Date(jsDate.getTime());
  let freeSlots = parseInt(this.freeSlotRange);
  d.setDate(d.getDate() + parseInt(this.freeSlotRange));     
  options.disableDateRanges = [{ begin: { year: event.jsDate.getFullYear(), month: event.jsDate.getMonth() + 1, day: event.jsDate.getDate() },
    end: { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() - 1 } }];
  this.myDpOptions = options;
}
else {
  // end date selection - remove disableSince option
  options.disableSince = { year: 0, month: 0, day: 0 };
  this.myDpOptions = options;
  let d: Date = new Date();
  let month: any = d.getMonth() + 1;
  if (month < 10) {
    month = '0' + month;
  }
}

} getCopyOfOptions(): IAngularMyDpOptions { return JSON.parse(JSON.stringify(this.myDpOptions)); }`

[kekeh]

Hi @geethzz

Here https://github.com/kekeh/angular-mydatepicker/wiki/disable-until-yesterday is example on how to disable dates before current date.

With the disableDates option you can disable dates with styles: https://github.com/kekeh/angular-mydatepicker/wiki/usage-of-disableDates-option

All examples: https://github.com/kekeh/angular-mydatepicker/wiki