how to change the label of the years button when it is disabled in mat-datapicker?

78 views Asked by At

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

example image attached

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

1

There are 1 answers

3
pawooten On

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.