css Question posted in
Some basic documentation can be found here.

Css – Issue with mat-datepicker-toggle disabled Icon color in Angular Material 15.2.9

I’m currently working with Angular Material version 15.2.9 and encountering an issue where the disabled state of the mat-datepicker-toggle icon remains black, whereas the enabled state correctly shows as grey. I’ve attempted to override the CSS to change the icon color, it successfully applies to the enabled state but seems to have no effect on the disabled state. For instance, even if I set the icon color to red, the disabled icon still appears black.

<mat-form-field appearance="outline" class="w-100 date-input">
    <input
      [id]="'startDate' + idx"
      [formControl]="formManager.getStartDate(idx)"
      placeholder="MM/DD/YYYY"
      matInput
      readonly
      [matDatepicker]="picker"
      (click)="picker.open()"/>
    <mat-datepicker-toggle disabled matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

    .mat-datepicker-toggle.mat-datepicker-toggle {
      color: red !important;
    }

    .mat-datepicker-toggle[disabled] .mat-icon,
    .mat-datepicker-toggle.mat-datepicker-toggle-disabled .mat-icon {
      color: red !important;
    }

enter image description here

Has anyone faced a similar issue or can provide insight on how to correctly override the color for the disabled state? Any suggestions or solutions would be greatly appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It seems that the problem is related to the Angular version upgrade that was done several months ago. The solution in my case was to include both core and legacy components in the Material theming. Previously, only the legacy components were included, but I added the core components as well.

    @include mat.core();
@include mat.legacy-core();

...

@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);

  2. 0

    This CSS will change the color of disabled icon in date picker

    ::ng-deep mat-datepicker-toggle > .mat-mdc-icon-button[disabled], 
.mat-mdc-icon-button.mat-mdc-button-disabled {
    cursor: default;
    pointer-events: none;
    color: red !important;
}
::ng-deep mat-datepicker-toggle > .mat-mdc-icon-button {
    color: red !important;
}

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search