I am trying to change the label of the year selection button since when I disable dates the label text continues to take those dates into account, that is to say
I have a minimum for the date selection from 2002 onwards when inserting this using the min and max of ma-datapicker disables the dates outside the established range but the problem is that the label is still taking them into account
Based on the image, what I want to do is that the header label says 2003-2024 since they are the available dates
html code
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
.ts code
minDate: Date;
maxDate: Date;
constructor() {
const currentYear = new Date().getFullYear();
this.minDate = new Date(currentYear - 20, 0, 1);
this.maxDate = new Date(currentYear + 1, 11, 31);
}
CSS to hide visible elements with disabled attribute set to true
.mat-calendar-body-disabled
> .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
display: none !important;
}
I have tried to modify from the style selectors to apply a new text but I have not been successful, in addition to investigating how to change specifically but I can't find anything
I am currently thinking of directly modifying the package so that it only takes into account the enabled dates in the label, but I understand that it is not a good practice to modify it, any ideas on how to solve it or what recommendations they give me
https://material.angular.io/components/datepicker/overview#highlighting-specific-dates mentions the ability to apply css to certain dates on the calendar. Perhaps you could use this to hide the disabled dates.