My issue involves a datepicker situated inside a mat-card. Here is the code snippet:
<mat-card class="datepickerContainer">
<mat-form-field appearance="fill">
<mat-label>Month and Year</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker
startView="multi-year"
(yearSelected)="yearSelectedHandler($event)"
(monthSelected)="monthSelectedHandler($event, datePicker)"
panelClass="example-month-picker">
</mat-datepicker>
</mat-form-field>
</mat-card>
After initializing the component in ngAfterViewInit(), I try to set the minimum selectable year based on configurations:
ngAfterViewInit(): void {
this.configService.getConfiguration().subscribe((configs) => {
this.minDate.setFullYear(configs.startYear);
});
}
I have ensured that this.minDate.setFullYear() is invoked with the correct year. However, upon opening the date picker interface in the frontend, it appears completely disabled:
https://i.sstatic.net/GOd1g.png
While I can select the displayed year (2022), I am unable to choose a specific month:
https://i.sstatic.net/OPabC.png
No sections of my code explicitly disable the date picker functionality, leading me to question why it seems inactive and why the min year remains unchanged at 2021. Furthermore, when initially setting the min date to a different year (e.g., 2021), everything operates correctly. Therefore, the problem likely stems from Angular failing to recognize the modification made to the min date within ngAfterViewInit().