How to disable particular dates in angular material using angular material date picker

Question

I want to disable particular dates in mat date picker , which comes from database , the problem which i am facing is value of dates which fetching from database taking time , before that DOM gets executed .

Here is HTML code

<mat-form-field class="w-100">
                <input matInput [matDatepicker]="picker" formControlName="startDate"  [matDatepickerFilter]="myHolidayFilter" placeholder="Choose a date">
                <mat-datepicker-toggle  matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker ></mat-datepicker>
              </mat-form-field>

and the component.ts file part is

myHolidayFilter = (d: Date)=> {
          const time=d.getTime();
    return !this.myHolidayDates.find(x=>x.getTime()==time);   
}

I written a service call in ngoninit which takes data from database.

this.scheduleService.getLeaveDate().subscribe(result=>{
        this.myHolidayDates=result;
        });

What can i do , any suggestions . Thanks

Check if your "holidayDates". I'm pretty sure that is an array of string, so you should convert -using map- in javascript object Dates:`this.myHolidayDates=result.map(x=>new Date(x))` — Eliseo, Aug 24 '22 at 07:30
@Eliseo , i have converted it in date format while storing it. — Aniket kute, Aug 24 '22 at 07:37
please, use `console.log(result)` to be sure is an array of Dates. NOTE: Be carefull, it's possible you need use setHours(0,0,0,0) like this another [SO](https://stackoverflow.com/questions/73433976/multiple-daterange-filter-for-angular-material-datepicker/73442350#73442350) to compare the getTime. You can use inside the filter function `console.log(d,d.getTime(),this.myHolidayDates[0],this.myHolidayDates[0].getTime())` to check if there're a problem with the GTM — Eliseo, Aug 24 '22 at 07:50
@Eliseo , I checked the array contains dates or string . so it is in date format. The problem i am facing is before the result(dates from database) comes , the " myHolidayFilter "run. — Aniket kute, Aug 24 '22 at 07:58
I make a [stackblitz](https://stackblitz.com/edit/angular-nosmhs-peaxft?file=src%2Fapp%2Fdatepicker-overview-example.ts). seems it's ok — Eliseo, Aug 24 '22 at 08:16
@Eliseo , Thank you . it is working for me by using setHours(0,0,0) . but when we open a screen 1st time then it will throw error , after that it is not showing any error. — Aniket kute, Aug 24 '22 at 09:37
Check if d has value:`(d: Date)=> { const time=d?d.getTime():0;....}` you can declare `myHolidayDates:any[]=[]` the "=[]" create an empty array — Eliseo, Aug 24 '22 at 09:41

score 0 · Answer 1 · answered Aug 24 '22 at 13:53

Wrap the datepicker in a conditional and only show it if the loading has finished.

    <ng-container *ngIf="this.myHolidayDates" ; else elseTemplate">
        //Show datepicker since your data should be available at this point
    </ng-container>
    
    <ng-template #elseTemplate>
        //Show Loading spinner or disabled dummy
    </ng-template>

How to disable particular dates in angular material using angular material date picker

1 Answers1